Vue 3 Form Handling: Watchers Not Triggering on Dynamic Input Fields
I'm attempting to set up I've looked through the documentation and I'm still confused about I've looked through the documentation and I'm still confused about I'm working on a Vue 3 application where I dynamically generate form fields based on user input... However, I've encountered an issue where the watchers I set up for these dynamically created input fields are not triggering as expected when the input values change. Here's a simplified version of what I'm doing: ```javascript <template> <div> <button @click="addField">Add Field</button> <div v-for="(field, index) in fields" :key="index"> <input v-model="field.value" :placeholder="field.placeholder" /> </div> </div> </template> <script> export default { data() { return { fields: [] }; }, methods: { addField() { this.fields.push({ value: '', placeholder: 'New Field' }); } }, watch: { fields: { handler(newFields) { console.log('Fields changed:', newFields); }, deep: true } } }; </script> ``` I confirmed that `addField` is being called and additional fields are indeed being rendered, but when I type into these fields, the watcher doesn't log any changes. It's like the watcher isn't picking up the changes to the `value` properties of the objects inside the `fields` array. I've tried using both a normal watcher and the `deep: true` option, but neither seem to work. I also checked for Vue devtools, and I can see that the values are being updated in the state, so it appears to be an issue with how the watcher is set up. Is there a recommended way to handle this situation in Vue 3? Am I missing something fundamental about how watchers work with dynamic data structures? Any help would be greatly appreciated! This is part of a larger application I'm building. For context: I'm using Javascript on Linux. This issue appeared after updating to Javascript latest. The stack includes Javascript and several other technologies. Is there a simpler solution I'm overlooking?