Vue 3: Form validation not triggering for nested objects in v-model bindings
I'm following best practices but I'm relatively new to this, so bear with me... I've been struggling with this for a few days now and could really use some help. Quick question that's been bugging me - I'm building a Vue 3 application where I have a form to collect user information, which includes a nested object for address details... I'm using `v-model` to bind the fields, but I noticed that validation is not triggering as expected on the nested fields, and I'm not seeing the error messages when the form is submitted. I've set up `VeeValidate` for managing the validations. Here’s a simplified version of my form component: ```vue <template> <form @submit.prevent="submitForm"> <div> <label for="name">Name:</label> <input type="text" v-model="formData.name" v-validate="'required'" name="name" /> <span>{{ errors.first('name') }}</span> </div> <div> <label for="address.street">Street:</label> <input type="text" v-model="formData.address.street" v-validate="'required'" name="address.street" /> <span>{{ errors.first('address.street') }}</span> </div> <div> <label for="address.city">City:</label> <input type="text" v-model="formData.address.city" v-validate="'required'" name="address.city" /> <span>{{ errors.first('address.city') }}</span> </div> <button type="submit">Submit</button> </form> </template> <script> import { required } from 'vee-validate/dist/rules'; import { extend } from 'vee-validate'; extend('required', required); export default { data() { return { formData: { name: '', address: { street: '', city: '' } } }; }, methods: { submitForm() { this.$refs.observer.validate().then(valid => { if (valid) { // Handle form submission console.log(this.formData); } }); } } }; </script> ``` When I try to submit the form without filling the required fields, the validation messages for the address fields do not show up. I've confirmed that the rules are correctly defined and the VeeValidate setup is functional for the name field. I've also tried using `v-bind` for dynamic properties, but that didn't help either. Anyone have insights on what might be going wrong with the validation for nested objects? I'm on Vue 3.2.0 and VeeValidate 4.5.0. I'm working on a CLI tool that needs to handle this. How would you solve this? My development environment is Windows. Any ideas what could be causing this? Thanks in advance! I'm on macOS using the latest version of Vue. Hoping someone can shed some light on this.