Vue · VUE0003

Do not mutate state in onUpdated

Flags mutation in onupdated in Vue lifecycle code before it leaks into runtime behavior.

VUE0003vite-doctor/vuelifecycleerrorSuggestion

vue/lifecycle/no-mutation-in-onupdatedsrc/rule-packs/vue/rules/vue/no-mutation-in-on-updated.ts Upstream docs

Run this rule

pnpm vite-doctor . --framework vue --rules vue/lifecycle/no-mutation-in-onupdated

Why it matters

onUpdated runs after any DOM update caused by reactive state. Mutating reactive component state there can schedule another update and create an update loop.

Recommended 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.

Useful links

Rule reference

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>