Description
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
meta
state 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.15.0 (Regression Introduced): Failing Example
Code of Conduct
- I agree to follow this project's Code of Conduct