Skip to content

Breaking Change in useField Behavior After v4.11.8 - meta object no longer syncs #5021

Open
@nikosgpet

Description

@nikosgpet

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

  1. Open both provided sandbox examples.
  2. Interact with the input fields by touching them.
  3. Observe the differences in the meta state updates between the two versions.

Version

Vue.js 3.x and vee-validate 4.x

Demo link

Code of Conduct

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions