<template>

  <div id="app">

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

    <p>nextTick 전: {{ before }}</p>

    <p>nextTick 후: {{ after }}</p>

  </div>

</template>

​

<script>

import { nextTick } from "vue";

export default {

  data() {

    return {

      count: 0,

      before: 0,

      after: 0

    };

  },

  methods: {

    async increment() {

      this.count++;

​

      // DOM not yet updated

      this.before = document.getElementById("counter").textContent;

​

      // DOM is now updated

      nextTick().then(

        function () {

          this.after = document.getElementById("counter").textContent; // 1

        }.bind(this)

      );

    }

  }

};

</script>

​