veevalidate async validation rejection not reflected in UI after initial mount

Answer

Yes, veevalidate automatically updates the UI when an async validation promise rejects after the initial mount. Because veevalidate stores validation results in reactive references (such as the errors ref provided by useField), any update to the error state—including a promise rejection—triggers Vue's reactivity system, forcing a re-render of the template where those errors are bound.

How Async Rejections Interact with Mount

When validateOnMount: true is used in veevalidate v4, the validate() method is invoked during the component's setup phase. The timing of the UI update depends on when the promise settles:

• Settles before first render: The error is present in the errorBag during the initial render cycle, and the error message appears immediately.
• Settles after first render: The async rule updates the reactive errors ref upon rejection. Vue schedules a DOM update for the next tick, and the error message surfaces in the UI without requiring a manual trigger.

Minimal Composition API Pattern

To ensure the UI stays in sync with the errorBag, use the useField hook to bind the field value and its corresponding error message. No manual re-validation logic is required.

import { useField } from 'vee-validate';

// Async rule returning a Promise
const { value, errorMessage } = useField('username', (value) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      // Simulate server-side rejection
      reject('Username is already taken');
    }, 1000);
  });
});

In your template, bind directly to the errorMessage:

<input v-model="value" />
<span v-if="errorMessage">{{ errorMessage }}</span>

Potential Reactivity Pitfalls

If the UI is not updating, verify the following assumptions:

• Avoid Mutation: Ensure you are not manually mutating the errors array or replacing the reactive ref with a plain JavaScript object, as this breaks Vue's tracking.
• Binding Method: Confirm you are using the Composition API (useField/useForm) or the v-model directive. Using non-reactive $refs in the Options API may bypass the automatic update cycle.
• Error Mapping: mapErrors functions typically operate on the current state of the errorBag; since the bag is reactive, mapped errors will also update automatically when the async promise settles.