Configuration does not work and Maximum recursive updates

[Some-Random-D-e-v]

What happened?

When loading a large form with 42 fields, I noticed that vee-validate performs multiple unnecessary validations:

• On load: This is expected.
• On model update: While this is debatable in my case but, it is acceptable.
• Two additional validations afterward: These are not expected and cause issues within the Vue app.

This behavior results in the following error:

Uncaught (in promise) Maximum recursive updates exceeded in component <Form>. This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook, or watcher source function.
Snippet of the Form

Below is an example of my form implementation:

<Form 
  as="v-form"
  ref="formRef"
  name="EnergyLabelDetails"
>
  <v-container fluid class="pa-0">
    <v-row>
      <v-col>
        <masonry :cols="{ default: 2, 1264: 1 }" :gutter="12">
          <v-container class="boxed" fluid>
            <header>Label</header>
            <v-row>
              <v-col>
                <Field v-model="label.energyLabel" name="energyLabel" rules="required" v-slot="{ errors }">
                  <v-select
                    hide-details="auto"
                    label="Label"
                    :items="energyLabels"
                    v-model="label.energyLabel"
                    :error-messages="errors"
                    :readonly="showEdit"
                    :variant="!showEdit ? 'outlined' : 'plain'"
                    persistent-placeholder
                    item-title="description"
                    item-value="key"
                  />
                </Field>
              </v-col>
            </v-row>
          </v-container>
        </masonry>
      </v-col>
    </v-row>
  </v-container>
</Form>

Temporary Fix
When I modified the form to include :initialValues="{}", the error disappeared:

<Form 
  as="v-form" 
  ref="formRef" 
  name="EnergyLabelDetails" 
  :initialValues="{}"
>

However, this feels more like a quick workaround rather than a proper solution.

Global Configuration Attempt

Before discovering the above workaround, I attempted to set global configuration for vee-validate in my main.ts file:

import { configure } from "vee-validate";
import "@/mixins/vee-validate.js"; // Sets validation rules (e.g., required, maxLength)

configure({
  validateOnInput: false,
});

I also tried adding validateOnInput="false" directly to the <Form> tag, but this had no effect.

My preferred solution would be to configure vee-validate explicitly for this form with the following settings:

{
  validateOnBlur: true,
  validateOnChange: false,
  validateOnInput: false,
  validateOnModelUpdate: true,
}

Here are the versions of the libraries I am using:

"vee-validate": "^4.14.7" (previously ^4.13.2)
"vue": "^3.4.37"
"vuetify": "^3.7.1"

Reproduction steps

1. Clone the repository:
   Copy the given repository to your local machine.

2. Install dependencies:
   Run the following command to install all required dependencies:

npm install}

Start the development server:

npm run dev

Test the form validation:

3. Locate the form in the application.
   Enter a number between 0 and 9 with up to 4 decimal places (e.g., 3.1234). The validation should pass.
   Trigger validation errors:

4. Enter numbers less than 0, greater than 9, or with more than 4 decimal places (e.g., -1, 10, 3.12345).
   Observe that the validation kicks in immediately.

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

https://github.com/Some-Random-D-e-v/Vee-validate-error/

Code of Conduct

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