Vue · Watchers

`VUE0021`Clean up watcher side effects

Checks that Vue watch code includes the side effect cleanup needed for predictable behavior.

vite-doctor/vuewatcherswarnSuggestion

vue/watch/require-side-effect-cleanup src/rule-packs/vue/rules/vue/require-watcher-cleanup.ts Upstream docs

Why it happens

Effects that outlive their component create leaks and stale updates. Register cleanup where Vue or VueUse can dispose it automatically.

Fix

Add side effect cleanup where Vue expects it, close to the code that depends on it.

Example

Clean up watcher side effects

Before

<script setup lang="ts">
watch(query, () => {
  const timer = setTimeout(search, 300)
})
</script>

After

<script setup lang="ts">
watch(query, (_, __, onCleanup) => {
  const timer = setTimeout(search, 300)
  onCleanup(() => clearTimeout(timer))
})
</script>

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/watch/require-side-effect-cleanup

Useful links

Upstream docs

vue/watch/require-side-effect-cleanup

VUE0021Clean up watcher side effects