Why are variables not updated after nextTick?

Question

Animation

Look at my code, I am assigning a new value to a variable in data and var width is set to 100. After that, when the animation ends (and has a value of 0), I try to return the value in variable width to 100, and start the animation again, but Vue does not assign the new value is 100 and it will remain 0. But if I do it with setTimeout it works fine. Why doesn't this happen in nextTick?
Link to jsfiddle Own
code

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 ;
}

Answer 1

Well, firstly, the variables are still updated. Secondly, the problem here is not so much in the use of nextTick, but in how the browser optimizes page rendering. If the same css property is updated several times in a row, then only the last state will be rendered. To achieve the desired behavior, you need to trigger a reflow between property changes - there are different options here . For example .