Hot reload will cause Maximum recursive updates exceeded in <Form>

[bar-min]

What happened?

If we place Field component in another component and use it in the Form, then after hot reload there will be an error.
(It will cause Maximum recursive updates exceeded in component)

Reproduction steps

1. Go to demo
2. Check TestField.vue component.
3. Change text in console.log on line 13 to trigger hot reload
4. Check console

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://codesandbox.io/s/vee-validate-loop-tuzlmm

Code of Conduct

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

[hieutran094]

I have also faced this issue.

[mingtheanlay]

Still having this issue

[antlionguard]

using useForm solves the problem.

[websitevirtuoso]

yes I have the same issue. Will try to use "useForm" to fix it

[websitevirtuoso]

using useForm solve the problem

[logaretm]

Does this happen with vite, vue and vee-validate all upgraded to latest versions? AFAIK it seems to happen with Webpack configurations on some versions of vue/vee-validate which may be a bug with the HMR with that setup and not with vee-validate itself.

P.S: I downloaded the example and it does not happen with vee-validate@4.9+ and vue3.2+ and does not happen with vite at all, the project setup is too old for me to investigate and support.

Closing until proof it happens on current releases and new ecosystem recommendations, especially since there is a workaround.