nextTick for DOM update timing in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will be the output after calling nextTick?

Consider this Vue 3 component using nextTick. What will be logged to the console?

Vue

import { ref, nextTick } from 'vue';

export default {
  setup() {
    const count = ref(0);

    function increment() {
      count.value++;
      console.log('Before nextTick:', count.value);
      nextTick(() => {
        console.log('Inside nextTick:', count.value);
      });
    }

    return { count, increment };
  }
};

A Before nextTick: 1\nInside nextTick: 1

B Before nextTick: 0\nInside nextTick: 1

C Before nextTick: 1\nInside nextTick: 0

D Before nextTick: 0\nInside nextTick: 0

💡 Hint

Remember that count.value updates immediately, but DOM updates happen after nextTick.

The count.value is incremented immediately, so the first log shows 1. The nextTick callback runs after DOM updates, but the reactive value remains 1, so the second log also shows 1.

❓ state_output

intermediate

What is the DOM content after nextTick callback?

Given this Vue 3 component, what will be the content of the <div> after the nextTick callback runs?

Vue

<template>
  <div>{{ message }}</div>
  <button @click="updateMessage">Update</button>
</template>

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

const message = ref('Hello');

function updateMessage() {
  message.value = 'Updated';
  nextTick(() => {
    const div = document.querySelector('div');
    console.log(div.textContent);
  });
}
</script>

A Hello

B Updated

C undefined

D Error: div is null

💡 Hint

Think about when the DOM updates happen relative to nextTick.

The message is updated before nextTick. The callback runs after the DOM updates, so the div's text content is 'Updated'.

🔧 Debug

advanced

Why does this nextTick callback not see updated DOM?

In this Vue 3 setup, the nextTick callback logs the old DOM content instead of the updated one. What is the cause?

Vue

<template>
  <p ref="para">Old</p>
  <button @click="changeText">Change</button>
</template>

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

const para = ref(null);

function changeText() {
  para.value.textContent = 'New';
  nextTick(() => {
    console.log(para.value.textContent);
  });
}
</script>

A Direct DOM change bypasses Vue reactivity, so nextTick does not wait for it

B nextTick callback runs before the DOM update

C para ref is null inside nextTick callback

D Vue automatically reverts manual DOM changes after nextTick

💡 Hint

Consider how Vue tracks changes and when nextTick triggers.

Manually changing DOM elements directly does not trigger Vue's reactivity system. Therefore, nextTick does not wait for these changes, and the callback sees the old content.

📝 Syntax

advanced

Which nextTick usage is syntactically correct in Vue 3 Composition API?

Choose the correct way to use nextTick to run code after DOM updates.

A nextTick(console.log('DOM updated'));

B nextTick.then(() => console.log('DOM updated'));

C nextTick(() => { console.log('DOM updated'); });

D await nextTick(); console.log('DOM updated');

💡 Hint

Remember nextTick returns a Promise and can be awaited or passed a callback function.

Option C correctly passes a callback function to nextTick, which executes after the DOM update cycle. Option A logs immediately and passes undefined to nextTick. Option B is invalid syntax since nextTick is a function, not a Promise instance. Option D requires an async function context to use await.

🧠 Conceptual

expert

Why use nextTick in Vue 3 when updating reactive data?

Which statement best explains the purpose of nextTick in Vue 3?

A <p>It batches multiple reactive data changes into a single update cycle.</p>

B <p>It prevents Vue from updating the DOM automatically.</p>

C <p>It immediately forces synchronous DOM updates before continuing.</p>

D <p>It delays code execution until after the DOM has updated to reflect reactive data changes.</p>

💡 Hint

Think about when DOM updates happen relative to reactive data changes.

nextTick schedules a callback to run after Vue finishes updating the DOM to reflect reactive data changes. This allows code to safely access the updated DOM.

Practice

1. What is the main purpose of nextTick in Vue?

easy

A. To delay data changes by a fixed time

B. To run code after Vue updates the DOM

C. To immediately update the data without waiting

D. To cancel pending DOM updates

Solution

1. Step 1: Understand Vue's update process

   Vue batches DOM updates and applies them asynchronously after data changes.

2. Step 2: Role of nextTick

   nextTick schedules code to run after these DOM updates finish, ensuring the page is updated.

3. Final Answer:

   To run code after Vue updates the DOM -> Option B

4. Quick Check:

   nextTick waits for DOM update = A [OK]

Hint: nextTick runs code after DOM updates finish [OK]

Common Mistakes:

• Thinking nextTick delays data changes
• Believing nextTick updates data immediately
• Assuming nextTick cancels updates

2. Which of the following is the correct way to use nextTick in Vue 3 Composition API?

easy

A. import { nextTick } from 'vue'; nextTick(() => { /* code */ });

B. this.nextTick(() => { /* code */ });

C. Vue.nextTick(() => { /* code */ });

D. nextTick.then(() => { /* code */ });

Solution

1. Step 1: Importing nextTick in Vue 3

   In Vue 3 Composition API, nextTick is imported directly from 'vue'.

2. Step 2: Using nextTick as a function

   It is called as nextTick(() => { ... }) to run code after DOM updates.

3. Final Answer:

   import { nextTick } from 'vue'; nextTick(() => { /* code */ }); -> Option A

4. Quick Check:

   Import and call nextTick correctly = A [OK]

Hint: Import nextTick from 'vue' and call as function [OK]

Common Mistakes:

• Using this.nextTick in Composition API
• Calling nextTick as a property of Vue
• Trying to use nextTick as a promise without calling

3. Given this Vue 3 code snippet, what will be logged to the console?

import { ref, nextTick } from 'vue';
const count = ref(0);
count.value = 1;
console.log(count.value);
nextTick(() => {
  console.log(document.getElementById('count').textContent);
});

Assuming the template is <div id="count">{{ count }}</div>.

medium

A. Logs: 0 then '0'

B. Logs: 0 then '1'

C. Logs: 1 then '0'

D. Logs: 1 then '1'

Solution

1. Step 1: Understand reactive update timing

   Setting count.value = 1 updates the reactive data immediately, so console.log(count.value) logs 1.

2. Step 2: DOM update happens asynchronously

   The DOM text content updates after Vue processes changes. Using nextTick waits for this update, so inside nextTick callback, the DOM shows '1'.

3. Final Answer:

   Logs: 1 then '1' -> Option D

4. Quick Check:

   Data updates immediate, DOM updates after nextTick = D [OK]

Hint: Data logs immediately; DOM logs inside nextTick [OK]

Common Mistakes:

• Expecting DOM to update before nextTick
• Confusing reactive data and DOM content timing
• Logging DOM content without nextTick

4. What is wrong with this Vue 3 code snippet?

import { ref, nextTick } from 'vue';
const visible = ref(false);
visible.value = true;
console.log(document.getElementById('box').style.display);
nextTick(() => {
  console.log(document.getElementById('box').style.display);
});

Template: <div id="box" v-if="visible" style="display:block">Box</div>

medium

A. The first console.log runs before DOM updates, so it logs empty string

B. nextTick is used incorrectly and will cause an error

C. The ref should be reactive, not ref

D. The style attribute is ignored by Vue

Solution

1. Step 1: Timing of DOM updates with v-if

   Setting visible.value = true triggers DOM update, but it happens asynchronously after current code.

2. Step 2: First console.log runs before DOM update

   So document.getElementById('box') is null or style.display is empty at first log.

3. Step 3: nextTick callback runs after DOM update

   Inside nextTick, the element exists and style.display is 'block'.

4. Final Answer:

   The first console.log runs before DOM updates, so it logs empty string -> Option A

5. Quick Check:

   DOM updates delayed, nextTick waits = C [OK]

Hint: DOM not ready before nextTick; first log empty [OK]

Common Mistakes:

• Expecting DOM to update immediately after reactive change
• Misusing nextTick causing runtime errors
• Confusing ref with reactive for simple boolean

5. You want to focus an input element right after it appears because a reactive variable showInput changes from false to true. Which is the best way to ensure the input is focused correctly?

hard

A. Call inputElement.focus() immediately after setting showInput = true

B. Use a setTimeout with 0 delay to focus the input

C. Use nextTick(() => inputElement.focus()) after setting showInput = true

D. Focus the input in the template using autofocus attribute

Solution

1. Step 1: Understand DOM update timing with reactive changes

   When showInput changes, Vue updates the DOM asynchronously, so the input may not exist immediately.

2. Step 2: Use nextTick to wait for DOM update

   Calling nextTick(() => inputElement.focus()) ensures the input is in the DOM before focusing.

3. Step 3: Other options are less reliable

   Calling focus immediately may fail; setTimeout is less precise; autofocus attribute may not work if input is conditionally rendered.

4. Final Answer:

   Use nextTick(() => inputElement.focus()) after setting showInput = true -> Option C

5. Quick Check:

   Wait DOM update with nextTick before focus = B [OK]

Hint: Focus input inside nextTick after showing it [OK]

Common Mistakes:

• Focusing input before it exists in DOM
• Relying on autofocus attribute for conditional elements
• Using setTimeout instead of nextTick