VUE0020Use post-flush watchers for DOM reads

Why it happens

Default watchers run before their owner's DOM update. Layout measurements can therefore reflect the previous render.

Fix

Use { flush: 'post' }, watchPostEffect(), or await nextTick() before reading DOM state.

Example

Use post-flush DOM reads

Before

<script setup lang="ts">
watch(open, () => {
  panel.value?.getBoundingClientRect()
})
</script>

After

<script setup lang="ts">
watch(open, () => {
  panel.value?.getBoundingClientRect()
}, { flush: 'post' })
</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-post-flush-for-dom-read

Useful links

• Upstream docs

Related rule

• vue/watch/require-post-flush-for-dom-read