useField errors not updating after upgrading from 4.11.8 to 4.13.2

[thibautvs]

What happened?

We have many instances of useField in our application that were working fine in 4.11.8, but stopped working after upgrading to 4.13.2 when it comes to updating the errors object (and related objects, such as errorMessage).

Code snippets:

import { useField } from 'vee-validate'

const {
  errors,
  value,
  errorMessage: errMess,
  meta
} = useField<boolean | null>('isCustomer', (val) => val !== null, { syncVModel: true })

<template>
  <div :class="[errors.length && 'lib__field--error']" class="lib__field">
    <div class="lib__tiles">
      <tile-radio
        v-model="value"
        :item="true"
        :label="t('protectedCustomerRequest.customer.isCustomer')"
        group="isCustomer"
      />
      <tile-radio
        v-model="value"
        :item="false"
        :label="t('protectedCustomerRequest.customer.isNotCustomer')"
        group="isCustomer"
      />
    </div>
    <span>{{ errMess }}</span>
    <p>Errors</p>
    <p>{{ errors }}</p>
    <p>Value</p>
    <p>{{ value }}</p>
    <p>Meta</p>
    <p>{{ meta }}</p>
    <error-message :errors="errors" />
  </div>
</template>

Initially, we see the following in the template:

Errors

[]

Value

Meta

{ "id": 3, "path": "isCustomer", "touched": false, "pending": false, "valid": true, "validated": false, "required": false, "initialValue": null, "errors": [], "bails": true, "type": "default", "value": null, "multiple": false, "__flags": { "pendingUnmount": { "3": false }, "pendingReset": false }, "fieldsCount": 1, "dirty": false }

And after clicking on the "Next" button, we see:

Errors

[]

Value

Meta

{ "id": 3, "path": "isCustomer", "touched": true, "pending": false, "valid": true, "validated": true, "required": false, "initialValue": null, "errors": [], "bails": true, "type": "default", "value": null, "multiple": false, "__flags": { "pendingUnmount": { "3": false }, "pendingReset": false }, "fieldsCount": 1, "dirty": false }

So the meta object shows that touched has been updated to true, and in the parent component, we display form.errors, which is initially empty and then displays { "isCustomer": "field_required" } after clicking on "Next". So the parent form detects the error, prevents correctly from moving to the next page, but somehow the useField instances don't catch that and don't update the errors properly.

Reproduction steps

1. Implement a useField validation (of boolean type in this case) with "isCustomer" as name
2. Implement a form with a "Next" button, with a required "isCustomer"
3. Click on "Next", and see that the form correctly detects the error, but that it's not reflected in the error values returned by the useField.

Version

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

What browsers are you seeing the problem on?

• Firefox
• Chrome
• Safari
• Microsoft Edge

Relevant log output

No response

Demo link

No link

Code of Conduct

• I agree to follow this project's Code of Conduct