Next DOM update flush

By webfansplz @webfansplz

When you mutate a reactive state in Vue.js, the resulting DOM updates are not applied synchronously.

Vue.js provides a utility for waiting for the next DOM update flush. Lets Go 👇:

<script setup>
import { ref } from "vue"

const count = ref(0)

function increment() {
  count.value++

  /**
   * DOM is not yet updated, how can we make sure that the DOM gets updated
   * Make the output be true
  */

  console.log(+document.getElementById("counter").textContent === 1)
}
</script>

<template>
  <button id="counter" @click="increment">
    {{ count }}
  </button>
</template>