What Is the Vue Scheduler?

In Vue, the scheduler is the internal mechanism that collects the work triggered by reactive changes — re-rendering components, running watch callbacks — in a queue and runs it all together at the right moment. Vue does not update the DOM the instant it sees a change; it gathers every change made in the same "tick" and updates the DOM once.

Why a queue?

Imagine changing the same value three times in an event handler. If the DOM were updated after every change, Vue would render three times for nothing. The scheduler de-duplicates the work: each component re-renders at most once per tick.

nextTick

That is why, right after you change a value, the DOM still shows the old state. To wait for the DOM update, use nextTick. Run the example below, click the button and watch the console:

import { createApp, ref, nextTick } from 'vue';

createApp({
  setup() {
    const count = ref(0);

    async function increment() {
      count.value++;
      count.value++;
      count.value++;
      // The DOM has not been updated yet: the old value is shown
      console.log(
        'Right after the change:',
        document.getElementById('counter').textContent
      );

      await nextTick();
      // The scheduler has processed the queue: the DOM was updated once
      console.log(
        'After nextTick:',
        document.getElementById('counter').textContent
      );
    }

    return { count, increment };
  },
  template: `
    <p id="counter">{{ count }}</p>
    <button @click="increment">Increment 3 times</button>
  `,
}).mount('#app');

Watcher timing (flush)

The scheduler also decides when watch and watchEffect callbacks run; you can change it with the flush option:

• 'pre' (default): runs before the component updates.
• 'post': runs after the DOM has been updated; use it when you need the updated DOM (shortcut: watchPostEffect).
• 'sync': runs immediately when the value changes, without queuing; use it carefully for performance reasons.

Note: "Scheduler" components for calendars and event planning are unrelated to this internal mechanism; they are third-party libraries.