Vue: [Vue warn]: Maximum recursive updates exceeded in component <Foo>. This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself
A watcher/computed/render effect keeps changing the state it depends on, creating an infinite update loop.
[Vue warn]: Maximum recursive updates exceeded in component <Foo>. This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itselfMaximum recursive updates exceeded[Vue warn]: You may have an infinite update loop in a component render functionYou may have an infinite update loop in watcher with expression Meaning
Look for state mutations in computed (should be pure), in templates/render functions, or watch callbacks that set the watched value. Use watch with conditions, avoid writing to refs read in the same effect, and use watchEffect carefully. Debug with onRenderTriggered.
Common causes
- Mutating state inside
computed/render - Watcher writes the value it watches
v-modelupdating itself with transformed value- Two watchers triggering each other
- Array/objects replaced every render
⚡ Quick fix
- Make computed pure; move mutations to handlers
- Add guards:
if (a.value !== next) a.value = next - Break watcher cycles; use
flush: "post"/{ deep: false }as needed
Detailed fix by platform
Vue
watch(source, (v) => { if (target.value !== f(v)) target.value = f(v); });
How to diagnose
- Effect — Which?
- Mutation — Own dependency?
- Guard — Present?
🔧 Still not fixed?
Many errors look alike. If the steps above didn’t solve it, one of these is probably what you’re facing:
Similar errors
- [Vue warn]: Avoid adding reactive properties to a Vue instance or its root $data at runtime Vue 2: [Vue warn]: Avoid adding reactive properties to a Vue instance or its root $data at runtime - declare it upfront in the data option
- [Vue warn]: Set operation on key failed: target is readonly Vue: [Vue warn]: Set operation on key "name" failed: target is readonly.
- [Vue warn]: Slot "default" invoked outside of the render function Vue: [Vue warn]: Slot "default" invoked outside of the render function: this will not track dependencies used in the slot
Most viewed in Vue
- Failed to resolve component Vue: [Vue warn]: Failed to resolve component: x
- Nuxt: window/document/localStorage is not defined (SSR) Nuxt: ReferenceError: window is not defined / 500 Internal Server Error during SSR
- getActivePinia() was called but there was no active Pinia Pinia: Error: [🍍]: "getActivePinia()" was called but there was no active Pinia. Are you trying to use a store before calling "app.use(pinia)"?
Other ways to find it
Where this error sits
Origin: On your device. Errors that are often confused with or caused by this one (click to open):
🧠 Still stuck? Analyze your error
Paste the full message, response headers or stack trace — we'll detect the platform and point to the most likely cause.
💬 What worked for others
No tips yet — did something else fix this for you?
Share what worked for you
Tips are checked by an editor before they appear. Links are removed.
Report a correction or suggest an improvement
Last updated 5 Nov 2026