Use nextTick() to Wait for DOM Updates

Impact: MEDIUM - Vue batches DOM updates asynchronously for performance. If you access the DOM immediately after changing reactive state, you'll see the old values. Use nextTick() to wait for the DOM to update.

When you modify reactive state, Vue doesn't update the DOM synchronously. Instead, it buffers changes and applies them in the next "tick" of the event loop. This is a performance optimization, but it can cause bugs when you need to read from or manipulate the DOM after state changes.

Task Checklist

• [ ] Use await nextTick() when you need to access updated DOM elements after state changes
• [ ] Use nextTick() when measuring DOM elements (heights, widths) after data changes
• [ ] Use nextTick() when focusing inputs or scrolling after content updates
• [ ] Consider if you really need DOM access - often you can work with reactive data instead

Incorrect:

import { ref } from 'vue'

const message = ref('Hello')
const messageEl = ref(null)

function updateMessage() {
  message.value = 'Updated!'

  // WRONG: DOM still shows "Hello" at this point
  console.log(messageEl.value.textContent) // "Hello" - stale!

  // WRONG: Scrolling/focusing may not work correctly
  scrollContainer.value.scrollTop = scrollContainer.value.scrollHeight
}

Correct:

import { ref, nextTick } from 'vue'

const message = ref('Hello')
const messageEl = ref(null)

async function updateMessage() {
  message.value = 'Updated!'

  // CORRECT: Wait for DOM to update
  await nextTick()

  // Now the DOM is updated
  console.log(messageEl.value.textContent) // "Updated!"

  // Scrolling and focusing now work correctly
  scrollContainer.value.scrollTop = scrollContainer.value.scrollHeight
}

// Alternative: callback syntax
function updateWithCallback() {
  message.value = 'Updated!'

  nextTick(() => {
    console.log(messageEl.value.textContent) // "Updated!"
  })
}

<script setup>
import { ref, nextTick } from 'vue'

const items = ref([])
const listRef = ref(null)

async function addItem() {
  items.value.push({ id: Date.now(), text: 'New item' })

  await nextTick()

  // Now we can safely scroll to the new item
  listRef.value.lastElementChild?.scrollIntoView({ behavior: 'smooth' })
}
</script>

Reference

• Vue.js Reactivity Fundamentals - DOM Update Timing
• Vue.js nextTick API