Vue 3: Reactive Form Validation implementation guide on Nested Object Properties
I've encountered a strange issue with I'm working with Vue 3 and I've set up a reactive form using the Composition API. However, I'm working with an scenario where changes to nested properties of my form's data object are not triggering validation updates as expected. For instance, I have a form that includes an address with nested properties like `street` and `zipCode`. When I update `zipCode`, the validation behavior message for that field doesn't show immediately unless I trigger a reactivity refresh manually. I've tried using `ref` for the form data but it seems `reactive` is necessary for objects. Here's a simplified code snippet of what I have: ```javascript import { ref, reactive, watch } from 'vue'; export default { setup() { const form = reactive({ address: { street: '', zipCode: '', }, errors: {} // For collecting validation errors }); const validateZipCode = () => { if (!form.address.zipCode.match(/^[0-9]{5}$/)) { form.errors.zipCode = 'Invalid zip code'; } else { form.errors.zipCode = ''; } }; watch(() => form.address.zipCode, validateZipCode); return { form }; } }; ``` I've tried adding a `watch` on the zipCode property as shown, but the behavior message only updates if I make a change and then immediately click out of the input field. I'm not sure if I'm correctly setting up the reactivity. Is there a more efficient way to handle this validation so that it updates in real-time without manual intervention? Any advice on best practices for nested reactive objects in Vue 3 would be appreciated! For reference, this is a production application.