VUE0005Watch destructured props with a getter

Why it happens

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

Fix

Use the Vue-supported defineProps watch getter pattern instead.

Example

Watch props with getters

Before

<script setup lang="ts">
const props = defineProps<{ id: string }>()
watch(props.id, loadUser)
</script>

After

<script setup lang="ts">
const props = defineProps<{ id: string }>()
watch(() => props.id, loadUser)
</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/reactivity/defineprops-watch-getter

Useful links

• Upstream docs

Related rule

• vue/reactivity/defineprops-watch-getter