What is Vue's nextTick?

nextTick is a utility that defers a callback until after the next DOM update cycle. Vue batches state changes and applies DOM updates asynchronously. This means after you change data, the DOM isn't immediately updated — Vue schedules it. If you need to access the updated DOM immediately after a state change, use nextTick. Usage: import { nextTick, ref } from "vue"; const message = ref("old"); async function changeMessage() { message.value = "new"; await nextTick(); // DOM has been updated console.log(document.getElementById("msg").textContent); // "new" }. Callback syntax: nextTick(() => { // callback after DOM update });. Options API: this.$nextTick(() => { this.$refs.input.focus(); });. Common use cases: (1) Focus an input after it's conditionally rendered: change v-if to true → DOM not yet updated → nextTick → element exists → focus it; (2) Scroll to a newly added item in a list; (3) Access the scrollHeight of an element after content was added; (4) Trigger animations after DOM updates; (5) Tests that need to wait for Vue to process changes. Why Vue batches DOM updates: if multiple data properties change in the same synchronous block, Vue only updates the DOM once at the end of the microtask queue — more efficient. nextTick waits for this flush to complete.