Perform the hook 'beforeUpdate' only once in Vuejs

Question

I got a code pad inside the hook beforeUpdate() of the Vue instance, and it is running several times in a row.

My question is:

It’s normal to hook beforeUpdate() be called several times?? If not, how do I avoid this loop that it keeps running??

beforeUpdate () {
  this.pageTimeGround = this.initTimeGroud(this.timeGround)
  let maxTime = this.pageTimeGround[this.pageTimeGround.length - 1]
  let minTime = this.pageTimeGround[0]
  let maxMin = maxTime.split(':')[0] * 60 + maxTime.split(':')[1] * 1
  let minMin = minTime.split(':')[0] * 60 + minTime.split(':')[1] * 1
  for (let i = 0; i < this.taskDetail.length; i++) {
    for (let j = 0; j < this.taskDetail[i].length; j++) {
      let startMin = this.taskDetail[i][j].dateStart.split(':')[0] * 60 + this.taskDetail[i][j].dateStart.split(':')[1] * 1
      let endMin = this.taskDetail[i][j].dateEnd.split(':')[0] * 60 + this.taskDetail[i][j].dateEnd.split(':')[1] * 1
      if (startMin < minMin || endMin > maxMin) {
        this.taskDetail[i].splice(j, 1)
        j--
        continue
      }
      let difMin = endMin - startMin
      this.taskDetail[i][j].styleObj = {
        height: difMin * 50 / 60 + 'px',
        top: ((startMin - (this.pageTimeGround[0].split(':')[0] * 60 + this.pageTimeGround[0].split(':')[1] * 1)) * 50 / 60) + 25 + 'px',
        backgroundColor: this.color[~~(Math.random() * this.color.length)]
      }
    }
  }
}

This code is lib Vue-Schedule, and is within and currently within the created(), but I need that whenever there is a change in data() of the DOM instance be re-rendered as I am working with an event schedule and notifications through Socket.io