Vue - v-model implementation guide Nested Object Properly in Component
I'm collaborating on a project where I'm working with an scenario with Vue 3 where the `v-model` directive doesn't seem to update the nested properties of an object as expected. I have a form where I'm binding user inputs to a reactive object, but changes to a nested property aren't triggering the reactivity as I anticipated. Here's a simplified version of my code: ```vue <template> <div> <input v-model="user.profile.name" placeholder="Name" /> <input v-model="user.profile.age" placeholder="Age" /> <p>Name: {{ user.profile.name }}</p> <p>Age: {{ user.profile.age }}</p> </div> </template> <script> import { reactive } from 'vue'; export default { setup() { const user = reactive({ profile: { name: '', age: 0 } }); return { user }; } }; </script> ``` When I type in the `Name` input field, the output updates correctly, but not for the `Age`. I initially thought it was an scenario with the way `v-model` works with nested properties. I've even tried using `@input` events to manually set the age, but it didn't resolve the scenario. I also checked the Vue documentation and found that the `reactive` function should handle nested properties as well. I'm not seeing any console errors, but the `Age` value doesn't reflect changes in the input field. Can anyone provide insight into why this might be happening? Am I missing something in terms of Vue's reactivity system? Any help would be appreciated! Could this be a known issue?