Vue+Vuetify出现Maximum recursive updates exceeded错误求助

Root Cause #

The error arises from two interacting issues:

• Dynamic component re-instantiation on every render: Using :is="() => render()" executes the render() function on every parent component re-render, returning a new VNode for VTextarea. Vue treats this as a brand-new component, so it unmounts the existing VTextarea and mounts a fresh instance each time.
• Reactive form validation triggering infinite cycles: The v-form's v-model binds to your reactive model state. When a new VTextarea is mounted, the form runs validation, which updates the model value. This state change triggers another parent re-render, restarting the cycle: re-render → new component → validation updates model → re-render. This infinite loop triggers Vue's "Maximum recursive updates exceeded" guard.

Why Your Fixes Work #

1. Switching to :is="render" #

Passing the function reference render directly tells Vue to use this function as the dynamic component's render function. Instead of creating a new component instance on each render, it reuses the existing one. This eliminates repeated mounting/unmounting, so form validation doesn't trigger repeatedly, breaking the loop.

2. Removing v-model="model" #

Without the reactive binding to the form's validity state, even if new VTextarea instances are created, there's no state change to trigger another re-render. The loop stops because the model value no longer updates in response to form validation.

Corrected Code Example #

<template>
  <v-form v-model="model">
    <component :is="render"></component>
  </v-form>
</template>

<script setup>
import { h } from 'vue'
import { components } from 'vuetify'

const model = defineModel<boolean | null>();
const render = () => h(components.VTextarea);
</script>

内容的提问来源于stack exchange，提问作者cubx