Error: Maximum recursive updates exceeded. - with nested useVuelidate usage

[etay2000]

When using nested validation, and a parent that displays validation errors in it's template, any changes to the nested component causing a hot reload trigger a 'Maximum recursive updates exceeded error'. Removing the reference to validation.$errors in the parent template resolves the error.

<!-- Parent -->
<template>
  <span>Parent errors: {{ validation.$errors }}</span> 
  <Nested/>
</template>
<script lang="ts">
export default defineComponent({
  components: {
    Nested
  },
  setup() {
    const rules: any = {};
    const validation: Ref<Validation> = useVuelidate(rules, {});
    console.log('Hot Reload: Parent');
    return {
      validation
    };
  }
})
</script>

<!-- Nested -->
<template>
  <span>Nested</span>
</template>
<script lang="ts">
export default defineComponent({
  setup() {
    const rules: any = {};
    const validation: Ref<Validation> = useVuelidate(rules, {});
    console.log('Hot Reload: Nested:::');
    return {};
  }
})
</script>

Update the console log text to trigger a hot-reload which will trigger the maximum recursion error.

[shentao]

This is something we are working on. However, you could help us a lot by providing a failing test for that specific case!

[etay2000]

I'd love to help, but I've already lost a fair amount of time hunting this down. It should be pretty easy to duplicate using the minimal code above.

[shentao]

Sorry to hear that. Understandable.

[ajdvoynos]

I'm also facing this maximum recursive updates issue with child components, but in a slightly different scenario, using custom validation methods. Have you made any progress on this? I've tried to create a codesandbox.io project that reproduces the issue, but I can't seem to get vue3 and vuelidate working together in codesandbox. But I do have a minimal version that I can share?

[dobromir-hristov]

Could you guys try with the latest Vuelidate version?

[lamka02sk]

Still having this problem in 2.0.0-alpha.10 😿

[lamka02sk]

For anyone seeking fast although not proper solution, use $scope property in useVuelidate function: https://vuelidate-next.netlify.app/advanced_usage.html#scope-property

useVuelidate(rules, data, { $scope: false })

[darkopetreski]

I am facing the same problem. Parent component and array of child components with several fields with validators. When hot reload I get recursion. I will try to provide example in the following days.

[emanuelradu]

Do you have any updates on this issue?

[abcirta]

It's been nearly 3 years now, any updates or workarounds ?

[shentao]

@arslan-bz could you provide a repo with minimal reproduction steps?

[joshuagraber]

Hi, any updates here? I'm experiencing the same very frustrating issue.

[nerminjukan]

Hello, same on my end, very annoying issue, please help. @shentao @dobromir-hristov

[sawa-ko]

I have this same problem but using useField.

  import { useField } from 'vee-validate';

  defineOptions({
    inheritAttrs: false,
  });

  const props = defineProps<{
    autocomplete?:
      | 'current-password'
      | 'email'
      | 'family-name'
      | 'given-name'
      | 'new-password'
      | 'off'
      | 'on'
      | 'username';
    disabled?: boolean;
    hasError?: boolean;
    hasWarning?: boolean;
    hint?: string;
    iconLeft?: `lucide:${string}`;
    iconRight?: `lucide:${string}`;
    label: string;
    name: string;
    placeholder?: string;
    readonly?: boolean;
    type: 'email' | 'password' | 'search' | 'tel' | 'text' | 'url';
  }>();

  const isFocused = ref(false);
  const isShowPassword = ref(false);

  const { errorMessage, errors, handleBlur, handleChange, value } = useField(() => props.name);