[Vuejs]-Having value loop from 100 to 0 – Vuejs

<template>
  <section v-if="!showPart">
    <!-- This part is shown when program is cycling looping numbers -->
    <div v-if="power1">
      {{power}}
    </div>
    <div v-else>
      {{powerReverse}}
    </div>
  </section>
  <div v-else>
    <!-- This part is shown when user clicks to select a number -->
    {{showValue}}
  </div>
  <button @click="stopFunc">{{textBtn}}</button>
</template>

<script>
export default {
  name: "powerCompo",
  data() {
    return {
      speed: 100, // speed of loop
      power: 99, // start point of loop
      power1: true, // for change view in increase and decrease states
      powerReverse: 0, // for increasing loop after reach to "0"
      showValue: "nothing selected", // showing the selected value
      decrease: null, // for clearing "timeout" in decrease mode
      increase: null, // for clearing "timeout" in increase mode
      showPart: false, // for changing view between "loop" or "stop" modes
      textBtn: "click for stop" // defines the text of btn
    };
  },
  watch:{
    power: {
      handler(value) {
        this.decrease = setTimeout(() => {
          this.power--;
        }, this.speed);

        if (this.power === 0) {
          clearTimeout(this.decrease);
          console.log("decrease");
          this.power1 = false;
          this.powerReverse = 0;
          this.powerReverse++;
        }
      },
      immediate: true
    },
    powerReverse(newValue) {
      this.increase = setTimeout(() => {
        this.powerReverse++;
      }, this.speed);

      if (this.powerReverse === 100) {
        clearTimeout(this.increase);
        console.log("increase");
        this.power1 = true;
        this.power = 100;
        this.power--;
      }
    }
  },
  methods: {
    stopFunc: function ($event) {
      /* This function is called each time the user clicks on button. Then if the text of button is "click for cycling again", it calls "resetFunc()" method and if not, it stops looping and shows the selected value. */
      if ($event.target.innerText === "click for cycling again") {
        this.resetFunc();
      } else {
        if (this.power1) {
          this.showValue = this.power;
          if (this.showValue === 100) {
            this.showValue = 99;
            this.power = 99;
          }
        } else {
          this.showValue = this.powerReverse;
        }
        this.showPart = true;
        clearTimeout(this.increase);
        clearTimeout(this.decrease);
        this.textBtn = "click for cycling again"
      }
    },
    resetFunc: function () {
      clearTimeout(this.increase);
      clearTimeout(this.decrease);
      this.textBtn = "click for stop"
      this.showPart = false;
      this.power= 100;
      this.power1= true;
    }
  }
}
</script>