In Vue 3, update reactive state first, then await nextTick() before reading or acting on the DOM that change affects. Vue batches DOM updates, so a synchronous read immediately after a state mutation may still see the previous rendered state.
Why the DOM can still show the old value
When reactive state changes, Vue buffers the resulting component updates and applies them in the next update flush. That lets Vue combine multiple changes instead of rendering after each individual mutation. As a result, changing a ref or component property does not mean the DOM has changed at that exact line of code.
nextTick() returns a Promise that resolves after Vue’s next DOM update flush. Await it after the relevant mutation when your code needs the DOM corresponding to that change. The Vue 3 API describes it as a utility for waiting for the next DOM update flush.
Wait for a particular update with Vue 3
Import nextTick as a named export from vue. In Composition API code, the common pattern is to mutate the ref and then await the flush before accessing the updated element:
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
#1 Best Overall
import { ref, nextTick } from 'vue'
const message = ref('before')
async function updateMessage() {
message.value = 'after'
await nextTick()
// Vue has applied the DOM update for this change.
}You can also pass a callback to nextTick. Awaiting its Promise is often easier to follow when the surrounding function is already asynchronous. Use it directly after the state change whose DOM result you need.
Options API
The same approach works in a Vue 3 Options API component:
import { nextTick } from 'vue'
export default {
data() {
return { message: 'before' }
},
methods: {
async updateMessage() {
this.message = 'after'
await nextTick()
// DOM corresponding to this update is available.
}
}
}Options API code can instead call this.$nextTick(). When using its callback form, the callback’s this is bound to the current component instance. The imported global function is generally clear in Composition API code.
nextTick() or the updated hook?
Choose based on what triggers the DOM work. nextTick() is for work tied to a particular state change. The updated lifecycle hook runs after component DOM updates more generally, including updates caused by other state changes. Vue’s lifecycle documentation recommends nextTick() when you need the updated DOM after a specific change.
Avoid changing component state inside updated: doing so can trigger another update and create an infinite loop, as Vue warns in the hook documentation.
What nextTick() does not wait for
The guarantee is limited to Vue applying its DOM update. It does not establish that images have loaded, CSS transitions have finished, the browser has painted a frame, or unrelated asynchronous work has completed. If your next operation depends on one of those events, wait for that event separately rather than treating nextTick() as a general “everything is finished” signal.
Vue 2 syntax and migration context
Vue 2 code commonly uses Vue.nextTick(callback) or this.$nextTick(callback); its API reference advises calling it immediately after changing data when you need to wait for the DOM update. For Vue 3, use the named import shown above, not the Vue 2 global Vue.nextTick() pattern. Vue’s migration guide documents the move to named global API imports.
The batching principle is also described in the Vue 2 reactivity guide: watcher work is queued asynchronously and de-duplicated. That is useful background when reading older examples, but Vue 3 code should follow Vue 3’s import syntax.
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Clear out junk files and repair common Windows errors3Fix the driver behind crashes, sound loss and screen glitchesQuick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
