Vue 3: How to Handle Nested Reactive Objects with v-model in Forms?
I'm getting frustrated with I've been banging my head against this for hours. I'm currently working with an scenario with Vue 3 where I want to bind a nested object in a form using `v-model`. The structure of my data looks like this: ```javascript data() { return { user: { name: '', address: { street: '', city: '' } } }; } ``` However, when I try to use `v-model` for the nested properties, like this: ```html <input v-model="user.name" placeholder="Name" /> <input v-model="user.address.street" placeholder="Street" /> <input v-model="user.address.city" placeholder="City" /> ``` I get unexpected behavior. Specifically, if I update the `user.name`, it updates correctly, but if I change `user.address.street`, the change does not reflect immediately in the `user` object as expected. Sometimes, I see the following warning in the console: `[Vue warn]: want to set reactive property on undefined, got undefined`. I've tried using `v-model` for the nested properties directly, thinking that Vue 3's reactivity would take care of this, but it doesn't seem to work as intended. I even attempted to wrap the inputs in a computed property to ensure the object is defined before binding: ```javascript computed: { streetAddress: { get() { return this.user.address.street; }, set(newValue) { this.user.address.street = newValue; } } } ``` Then I changed the input field to: ```html <input v-model="streetAddress" placeholder="Street" /> ``` This still doesn't resolve the scenario; the updates to other properties still seem to interfere. Is there a best practice for handling nested objects with `v-model` in Vue 3 that I might be missing? Any insights would be greatly appreciated! My team is using Javascript for this web app. Am I approaching this the right way? I'm on Windows 10 using the latest version of Javascript. What's the best practice here?