Vue · VUE0021

Clean up watcher side effects

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

VUE0021vite-doctor/vuewatcherswarnSuggestion

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

Run this rule

pnpm vite-doctor . --framework vue --rules vue/watch/require-side-effect-cleanup

Why it matters

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

Recommended fix

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

Useful links

Rule reference

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>