Combination of watch, computed and h creates an infinite loop after building

[jcarlosroldan]

Vue version

Every version tested 3.2.47 - 3.5.10

Link to minimal reproduction

https://play.vuejs.org/#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

Steps to reproduce

Change the country in the last form on the example and it will create an infinite loop. When running vue in debug mode, this won't happen.

What is expected?

To make the Country selector change the City selector.

What is actually happening?

An infinite loop.

System Info

Still happening on all tested versions.

Any additional comments?

Already reported it before: #8131 but after 2 years it was closed with no solution. The closing comment was clearly not a fix, but only contributors can reply now.

[Tofandel]

You should use inject provide to retrieve the form state instead of using useSlots().default()[0] and editing the props manually

Only MultiForm has changed:
https://play.vuejs.org/#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

[edison1105]

IMO, this useage is not correct resulting in problems and I've given you the solution see #8131 (comment)

the underlying cause is that the state is California after country changed to Spain. so

• props.value still be California
• but props.options changed to ['Madrid', 'Barcelona'] due to options being passed in

<BuggyForm type="select" name="state" :options="stateOptions"/>

here cause the infinite loop because California is not included in ['Madrid', 'Barcelona']

watch(() => [props.value, props.options], () => {
	if (props.type === 'select' && !props.options.includes(props.value)) {
		emit('update:value', props.options[0]);
	}
});

So, the solution is to pass value to BuggyForm to keep it synchronized

<BuggyForm type="select" name="state" :value="formValue.state" :options="stateOptions"/>

[Tofandel]

While I agree the usage is not correct (see my answer for the correct usage with inject/provide), the infinite loop is caused by the computed triggering the ref even if the result of the computed didn't change

const stateOptions = computed(() => {
  console.debug('[App] changing states based on new country:', formValue.value.country);
  return formValue.value.country === 'United States' ? ['California', 'New York'] : ['Madrid', 'Barcelona']
});

Basically the computed is listening on formValue.value and formValue.value.country

And the fact that you are then changing formValue.value.state in a way that triggers formValue.value makes the computed retrigger, with the same result which in turn triggers the watch(() => [..., props.options]) which causes this infinite loop

You can check this by adding:

watch(stateOptions, (options) => {
  console.log('new options', options);
})

And you will see the new options are being triggered with the same result on a loop, and this is in fact the root of the issue, that if a computed returns the same result, it still triggers the ref

You can avoid this by assigning the array to a variable to always return the same reference

const opt1 = ['California', 'New York'];
const opt2 =  ['Madrid', 'Barcelona'];
const stateOptions = computed(() => {
  console.debug('[App] changing states based on new country:', formValue.value.country);
  return formValue.value.country === 'United States' ? opt1 : opt2;
});

That is because in js

['California', 'New York'] === ['California', 'New York'] // false