form clearErrors() in computed value throws "Maximum recursive updates exceeded in component"

[olehlong]

Version:

• "vue" version: 3.4.21
• "@inertiajs/vue3" version: 1.0.15

Describe the problem:

When form.clearErrors() called in a computed value that used, for example, in toggling button disabled state, it throws an error:

"Maximum recursive updates exceeded in component . 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."

In production it hangs the page with recursion.

I have no issues with vue 3.4.14, but any newer version gives this error. So it's related to the recent changes in vue reactivity.

Steps to reproduce:

Basic example . It throws the error on start.

[shengslogar]

It's considered an anti-pattern to mutate state inside of a computed property. You've basically made an infinite loop.

https://vuejs.org/guide/essentials/computed.html#getters-should-be-side-effect-free