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

Vue version

3.2.38

Link to minimal reproduction

https://github.com/amm834/vue-supabase-workout-app

Steps to reproduce

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

Screenshot (19)

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

Screenshot (20)

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

System 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

Any additional comments?

Write more example and documentation for vue typescript. And example for how to manipulate with complex data structure and v-model. In fact, vue is lack of expert example in vue doc. Please provide that.

If vue support on the fly v-model value that can be a great feature for us.

vuejs / devtools-v6