What is `nextTick()` used for?

Vue batches DOM updates asynchronously for performance — when you mutate reactive state, the DOM doesn't update synchronously. nextTick() returns a promise that resolves after Vue has flushed pending DOM updates, letting you safely access the updated DOM.

import { nextTick, ref } from 'vue'

const message = ref('hello')

async function updateMessage() {
  message.value = 'updated'
  await nextTick()
  console.log(document.querySelector('.msg').textContent) // 'updated'
}