Glitch when update nested reactive property

[CesarGomezTissini]

Version

6.0.0-beta.7

Browser and OS info

Microsoft Edge 88.0.705.74 / Windows 10

Steps to reproduce

1. Create a composable function (useTest in my case), and set the following:

export default function useTest() {
  const state = reactive({
    load: reactive({
      number: 1,
    }),
    number: 1,
  });

  const changeNumber = () => {
    state.load.number = state.load.number   1;
  };

  return { ...toRefs(state), name, changeNumber };

2. Import it and destructuring all its properties and methods into a component, for example, HelloWorld.vue.

<template>
  <button>{{ load.active }}</button>
  <button @click="changeNumber">World</button>
  <button @click="name">Change</button>
</template>

<script>
import { defineComponent } from "vue";
import useTest from "./../composables/useTest";

export default defineComponent({
  setup() {
    const { load, changeNumber, name } = useTest();

    return { load, changeNumber, name };
  },
});
</script>

3. Set changeNumber to a button, and press.

What is expected?

state.load.number changing its value in Devtool automatically.

What is actually happening?

Not changes. I just should to press in parent component (App) and then in the child itself at Component tree view to see value update. This happened if property is not called in template, look like.

Additionally, "number" load sibling property isn't being showing in. I don't know if it's the same due to explained above (property is not called in Template)

I have generated the project with Vite.

[Akryum]

Please provide a runnable reproduction thanks!

[CesarGomezTissini]

Please provide a runnable reproduction thanks!

Hey @Akryum. Sure, This is the link, just clone it: https://github.com/CesarGomezTissini/devtool-beta-repro

Regards!

[iraklisg]

Same problem for me running on Firefox 88.0b4 (64-bit) (Manjaro Linux)

[Akryum]

@CesarGomezTissini If a reactive state isn't used in the application, it's not made reactive by Vue, and thus not triggering an update in your application nor in the devtools. Vue reactivity system is lazy.

In your reproduction, display load.number for example to make it reactive:

<button>{{ load.active }} {{ load.number }}</button>