Vue devtool did not reactive when I use on the fly reactive object pushing and manipulation with v-model in runtime

[theaungmyatmoe]

Version

6.2.1

Browser and OS info

System: OS: Windows 10 10.0.22000 CPU: (4) x64 Intel(R) Core(TM) i5-6300U CPU @ 2.40GHz Memory: 1.35 GB / 7.66 GB Binaries: Node: 16.15.1 - C:\Program Files\nodejs\node.EXE npm: 8.11.0 - C:\Program Files\nodejs\npm.CMD Browsers: Edge: Spartan (44.22000.120.0), Chromium (105.0.1343.42) Internet Explorer: 11.0.22000.120 npmPackages: vue: ^3.2.38 => 3.2.39

Steps to reproduce

• click Create nav link.
• Select Workout Type and then click Add Exercise
• It will show up the following input.

• Open dev tool and watch the input form v-model state. It is reactive.
• And click Add Exercise you will see the generated form input as following

• open dev tool and watch the second input.
• its v-model won't be reactive. That is bug. It is not working vue's deep reactivity.

see https://github.com/amm834/vue-supabase-workout-app/blob/3a208d09a5b19103806c2195c91ac4d3d7fd3a6a/src/components/CreateWorkout.vue#L69

I have to initialize for union typed array, if i don't initalize that nothing will be shown when i select that workout type.

see https://github.com/amm834/vue-supabase-workout-app/blob/3a208d09a5b19103806c2195c91ac4d3d7fd3a6a/src/components/CreateWorkout.vue#L71

It is the problem of lost of deep reactivity. According to the vue doc it should work as expected. But it is not working.

What is expected?

Object inside that array should be reactive when I use it with v-model

What is actually happening?

Reactive object is lost of it behavior what you called reactive inside the array. Vue doc mentioned object inside the array is reactive cuz of deep reactive mechanism but it is not working as expceted to be vue doc mentioned .

See https://vuejs.org/guide/extras/reactivity-in-depth.html

What is expected?

Object inside that array should be reactive when I use it with v-model

What is actually happening?

Reactive object is lost of it behavior what you called reactive inside the array. Vue doc mentioned object inside the array is reactive cuz of deep reactive mechanism but it is not working as expceted to be vue doc mentioned .

See https://vuejs.org/guide/extras/reactivity-in-depth.html

---

fix bug