VUejs: 3 Methods to update DOM after prop change

Using $nextTick, requestAnimationFrame and setTimeout

HTML

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vuex"></script>
<div id="app">
  <p>{{ valueA }}</p>
  <p>
    <button v-on:click="changeA()">
      Change
    </button>
  </p>
  <p>{{ value1 }}</p>
  <p>
    <button v-on:click="change1()">
      Change
    </button>
  </p>
  <p>{{ valueZ }}</p>
  <p>
    <button v-on:click="changeZ()">
      Change
    </button>
  </p>
  <p>{{ value9 }}</p>
  <p>
    <button v-on:click="change9()">
      Change
    </button>
  </p>
</div>

Babel + JSX

new Vue({
  el: '#app',
  data () {
    return {
      valueA: 'A',
      value1: '1',
      valueZ: 'Z',
      value9: '9'
    }
  },
  methods: {
    changeA: function () {
      this.valueA = 'B';
      Vue.nextTick(_ => {
        for (var i = 0; i < 900000000; i++) {}
        this.valueA = 'C';
      });
    },
    change1: function () {
      this.value1 = '2';
      requestAnimationFrame(_ => {
        for (var i = 0; i < 900000000; i++) {}
        this.value1 = '3';
      });
    },
    changeZ: function () {
      this.valueZ = 'Y';
      setTimeout(_ => {
        for (var i = 0; i < 900000000; i++) {}
        this.valueZ = 'X';
      }, 0)
    },
    change9: function () {
      this.value9 = '8';
      setTimeout(_ => {
        for (var i = 0; i < 900000000; i++) {}
        this.value9 = '7';
      }, 25)
    }
  }
});