hot reload will cause Maximum recursive updates exceeded in component <Form>

[Ltyi]

What happened?

I'm using custom component, it will cause Maximum recursive updates exceeded in component

when hot reloaded.

Reproduction steps

codesandbox

1. check TextInput.vue component.
2. comment out line 45 console.log trigger hot reload
3. check console

you can also check documentation example custom-inputs, it happend same issue when component hot reloaded.

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-uddth

Code of Conduct

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

[logaretm]

Thanks for reporting this, took a while to figure out the issue and it seems to be related to the behavior of computed here

vee-validate/packages/vee-validate/src/useForm.ts

Lines 725 to 734 in 7c621ab

	const flags = computed(() => {
	const fields = Object.values(fieldsByPath.value).flat(1).filter(Boolean) as PrivateFieldContext[];
	return keysOf(MERGE_STRATEGIES).reduce((acc, flag) => {
	const mergeMethod = MERGE_STRATEGIES[flag];
	acc[flag] = fields[mergeMethod](field => field.meta[flag]);
	return acc;
	}, {} as Record<keyof Omit<FieldMeta<unknown>, 'initialValue'>, boolean>);
	});

I've tracked the reason to computed behavior not waiting till the next tick to recompute stuff, so when HMR occurs it removes the field (unmounts), which will trigger a recomputation then it will add it again which will also trigger another recomputation. These recomputations result in the Form component re-rendering which will also trigger a few recomputations of its own during the HMR and it will be locked in a loop.

Replacing it with a watchEffect seems to work better here as it should wait for the next tick between recomputations, which is enough time for the HMR to stabilize.

I will publish a release shortly with this patch.