Breaking Change in `useField` Behavior After v4.11.8 - meta object no longer syncs
What happened?
Since upgrading from version 4.11.8 to any later version (>= 4.12.x), a breaking change has occurred in the behavior of useField. Specifically, when encapsulating an input within a parent component—such as handling generic UI states like error messages—calling useField("fieldname") separately in both parent and child components now returns two separate meta objects which are no longer synchronized.
In previous versions (<= 4.11.8), interacting with a field (e.g., touching the field) would correctly update both the child and parent component meta states simultaneously. In newer versions, the child component's meta updates independently, while the parent's meta remains unchanged, causing inconsistent validation state management.
Expected Behavior:
The parent and child components' meta states should remain synchronized when interacting with fields, preserving behavior from 4.11.8.
Current Behavior:
Since 4.12.x, the meta object synchronization between parent and child components is broken, leading to inconsistent UI states.
Impact: This breaking change significantly impacts components that rely on consistent validation state propagation between parent-child structures.
Suggested Resolution:
Restore synchronization behavior of meta objects as found in v4.11.8 or provide clear guidance and documentation for adapting to the new behavior if this change was intentional.
Reproduction steps
- Open both provided sandbox examples.
- Interact with the input fields by touching them.
- Observe the differences in the
metastate updates between the two versions.
Version
Vue.js 3.x and vee-validate 4.x
Demo link
- ✅ v4.11.8 (Expected Behavior): Working Example
- ❌ v4.12.0 (Regression Introduced): Failing Example
Code of Conduct
- I agree to follow this project's Code of Conduct
Source: logaretm/vee-validate