Vue · Lifecycle
vite-doctor/vuelifecycleerrorSuggestion
Why it happens
onUpdated runs after any DOM update caused by reactive state. Mutating reactive component state there can schedule another update and create an update loop.
Fix
Do not write to reactive values in onUpdated. Move the state change to the event or state transition that owns it, or use non-reactive local state for bookkeeping that does not drive rendering.
Example
Use non-reactive bookkeeping
Before
<script setup lang="ts">
const updateCount = ref(0)
onUpdated(() => {
updateCount.value++
})
</script>
After
<script setup lang="ts">
let updateCount = 0
onUpdated(() => {
updateCount++
})
</script>
Move reactive writes to the owner
Before
<script setup lang="ts">
const count = ref(0)
onUpdated(() => {
count.value++
})
</script>
After
<script setup lang="ts">
const count = ref(0)
function increment() {
count.value++
}
</script>
<template>
<button type="button" @click="increment">{{ count }}</button>
</template>
Verify the fix
Run only this rule after editing so the report stays focused on the diagnostic you are closing:
pnpm vite-doctor . --framework vue --rules vue/lifecycle/no-mutation-in-onupdated