Michael Hoffmann LogoMichael Hoffmann
·
1 min read

Vue Tip: Access DOM in Watcher Callback After Vue Updated It

Vue Tip: Access DOM in Watcher Callback After Vue Updated It Image
Script

If you make changes to reactive state in a Vue component, it can trigger both component updates and any watcher callbacks that you have created.

By default, these callbacks are executed before the component updates, so if you try to access the DOM inside a callback, it will be in its pre-update state.

To access the DOM after Vue has updated it in a watcher callback, you can use the flush: 'post' option:

Component.vue
<script setup> watch(source, callback, { flush: 'post', }) watchEffect(callback, { flush: 'post', }) </script>

Example for Vue 2 with Options API:

Component.vue
<script> export default { // ... watch: { key: { handler() {}, flush: 'post', }, }, } </script>

Post-flush watchEffect() also has a convenience alias, watchPostEffect():

Component.vue
<script setup> import { watchPostEffect } from 'vue' watchPostEffect(() => { /* executed after Vue updates */ }) </script>

If you liked this Vue tip, follow me on X to get notified about new tips, blog posts, and more. Alternatively (or additionally), you can subscribe to my weekly Vue & Nuxt newsletter:

I will never share any of your personal data. You can unsubscribe at any time.

Vue Tip: Pass Custom Arguments to Event Handler Method

Sometimes we need to pass custom arguments to the event handler method and access the original DOM event.

Vue Tip: Dynamically Change Page Title

I will show you a few ways how you can easily change the page title when navigating your application