nextTick in Vue.Js

In Vue when you change a value it is not immediately rendered to DOM because it is not updated asynchronously. DOM update is queued and on a timer Vue updates DOM. It happens so fast but sometimes you need to update the rendered DOM after Vue has rendered it, you cannot immediately do it because it hasn’t happened in that case you may use nextTick.

After Vue has re-rendered the component when you made changes to the reactive property.

<script src="https://unpkg.com/vue"></script>


<div id="app"></div>

Code:

const example = Vue.component('example', {

  template: '<p>{{ message
}}</p>',

  data: function () {

    return {

      message: 'not updated'

    }

  },

  mounted () {

    this.message = 'updated'



        console.log(

        'outside nextTick callback:', this.$el.textContent

    ) // => 'not updated'



    this.$nextTick(() => {

      console.log(

        'inside nextTick callback:', this.$el.textContent

      ) // => 'not updated'

    })

  }

})



new Vue({

  el: '#app',

   
render: h => h(example)

})