Почему не обновляются переменные после nextTick?

Посмотрите на мой код, я присваиваю новое значение переменной в data и var width имеет значение 100. После этого, когда анимация заканчивается (и имеет значение 0), я пытаюсь вернуть значение в переменной width 100, и запускаю анимацию снова, но Vue не назначает новое значение 100 и останется 0. Но если я сделаю это с setTimeout, это будет отлично работать. Почему это не происходит в nextTick?

Ссылка на jsfiddle

Собствеено код

new Vue({
  el: '#app',
  data: {
		width: 100,
    time: 0
  },
  mounted() {
  	setTimeout(() => {
	    this.time = 5000;
	    this.width = 0;
      
      setTimeout(() => {
      	this.rerenderBar();
      }, 5100)
      
    }, 1000)
		
  },
  methods: {
	  rerenderBar() {
    	this.time = 0;
	    this.width = 100;
      
      /* this.$nextTick(() => {
        this.time = 5000;
              this.width = 0;
      }) */
      
      setTimeout(() => {
      this.time = 5000;
	    	this.width = 0;
      }, 1500)
    }
  }
})

<div id="app">
  <div class="progress-bar-wrap">
    <div class="progress-bar" :style="{
          'width': width + '%',
          'transition-duration': `${time}ms`
        }"></div>    
  </div>
</div>

.progress-bar-wrap {
  width: 300px;
  position: relative;
}

.progress-bar {
  position: absolute;
  left: 0;
  top: 0;
  height: 3px;
  background: black ;
}