Prevent initial form validation if "useField" is not called

[SparkDragon]

What happened?

My actual issue concerns a case where useField() is defined inside a child component, which is conditionally rendered using v-if. However, I have reduced the problem to a simpler use case:

<template>
  <Form
    v-slot="{ errors }"
    :validation-schema="schema"
    :validate-on-mount="false"
  >
    Errors: {{ errors }}
  </Form>
</template>

<script setup lang="ts">
  import * as yup from 'yup';
  import { Form } from 'vee-validate';

  const schema = yup.object().shape({
    test: yup.string().required(),
  });
</script>

With this code, error is shown on page load.

I just need the validation of "test" field to be triggered when the form is submitted, and not immediately on mount.

In my real use case, this field does exist, but the useField declaration is part of a child component (e.g., modal, tabs, etc.).

I know that using v-show can solve the problem, but v-show also has its own drawbacks and is not always possible in every situation.

I would also like to clarify that I cannot make the "required" rule for the "test" field conditional, because this field is always required—even when it is not mounted in the DOM. I simply want the error message to appear only when the form is submitted.

Reproduction steps

No response

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

Demo link

https://codesandbox.io/p/devbox/missing-field-validation-triggered-on-form-mount-4pspg6

Code of Conduct

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