Run the hook 'beforeUpdate' only once in VueJS

I have a block of code inside the beforeUpdate() hook of the Vue instance, and it is running multiple times in a row.

My question is:

Is it normal for the beforeUpdate() hook to be called multiple times? If not, how do I avoid this loop as 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 from the vue-schedule lib, and is inside and is currently within created() but I need that whenever there is any change in the data() of the DOM instance to be re-rendered because I'm working with an event calendar and with notifications through Socket.io