I get an error Maximum recursive updates exceeded. 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. that causes the site to freeze

I realized that the problem is in the useField

<template>
  <div
    class="base_form-group"
    :class="{ error: errorMessage }"
  >
    <div class="flex_ai-c_jc-sb">
      <label v-if="label" class="base_form-label"
        >{{ label }}<sup v-if="required">*</sup></label
      >
      <slot name="password"></slot>
    </div>
    <div>
      <div v-if="before">
        <slot name="before"></slot>
      </div>
      <input
        :type="props.type"
        :placeholder="placeholder"
        :name="name"
        :id="name"
        class="base_form-input"
        :disabled="disabled"
        :value="inputValue"
        :required="required"
        @input="change"
      />
      <div v-if="after">
        <slot name="after"></slot>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useField } from "vee-validate";
const emit = defineEmits(["change"]);
const props = defineProps({
  label: {
    type: String,
    default: "",
  },
  placeholder: {
    type: String,
    default: "",
  },
  name: {
    type: String,
    default: "",
  },
  type: {
    type: String,
    default: "text",
  },
  modelValue: {
    type: String,
    default: "",
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  before: {
    type: Boolean,
    default: false,
  },
  after: {
    type: Boolean,
    default: false,
  },
  required: {
    type: Boolean,
    default: false,
  },
  validateOnValueUpdate: {
    type: Boolean,
    default: true
  }
});
const name = toRef(props, "name");

const {
  value: inputValue,
  errorMessage,
  handleChange,
  meta
} = useField(name.value, undefined, {
  initialValue: props.modelValue,
  validateOnValueUpdate: props.validateOnValueUpdate,
});

function change (e) {
  handleChange(e, props.validateOnValueUpdate)
  emit('change', e)
}

</script>

{
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev -o",
    "generate": "nuxt generate",
    "preview": "nuxt preview"
  },
  "devDependencies": {
    "nuxt": "^3.11.2",
    "nuxt-graphql-client": "^0.2.34",
    "sass": "^1.75.0"
  },
  "dependencies": {
    "@pinia/nuxt": "^0.5.1",
    "@popperjs/core": "^2.11.8",
    "@vee-validate/i18n": "^4.12.6",
    "autoprefixer": "^10.4.19",
    "konva": "^9.3.6",
    "lodash": "^4.17.21",
    "mitt": "^3.0.1",
    "nuxi": "^3.11.1",
    "pinia": "^2.1.7",
    "vee-validate": "^4.12.6",
    "vue-i18n": "^9.13.1",
    "vue-konva": "^3.0.2",
    "vue-select": "^4.0.0-beta.3",
    "vue3-snotify": "^0.0.6",
    "yup": "^1.4.0"
  }
}

@vee-validate/next doesn’t help, does anyone know what the problem is?