Vue · VUE0020
Use post-flush watchers for DOM reads
Report watcher callbacks that read DOM state before Vue has flushed the component update.
vue/watch/require-post-flush-for-dom-readsrc/rule-packs/vue/rules/vue/require-post-flush-for-dom-watch.ts Upstream docs Run this rule
pnpm vite-doctor . --framework vue --rules vue/watch/require-post-flush-for-dom-read
Why it matters
Default watchers run before their owner's DOM update. Layout measurements can therefore reflect the previous render.
Recommended fix
Use { flush: 'post' }, watchPostEffect(), or await nextTick() before reading DOM state.
Useful links
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>