[Vuejs]-Im trying to make a stopwatch that changes background color with a input for minutes and secondes

new Vue({
  el: '#demo',
    data() {
    return {
      elapsedTime: 0,
      timer: undefined,
      time: 0,
      minutes: 0,
      seconds: 0,
      setMinutes: 0,
      setSeconds: 0,
      warningMinutesRed: 0,
      warningSecondsRed: 0,
      warningMinutesOrange: 0,
      warningSecondsOrange: 0
    };
  },
  methods: {
    sendTime() {
        this.minutes = document.getElementById("min").value;
        this.seconds = document.getElementById("sec").value;
       
    },
    setWarning() {
      this.warningMinutesOrange = document.getElementById("minWarnOrange").value;
      this.warningSecondsOrange = document.getElementById("secWarnOrange").value;
      this.warningMinutesRed = document.getElementById("minWarnRed").value;
      this.warningSecondsRed = document.getElementById("secWarnRed").value;
    },
    start() {
      this.timer = setInterval(() => {
      console.log(this.warningMinutesOrange);
      console.log(this.warningSecondsOrange);
      console.log(this.warningMinutesRed);
      console.log(this.warningSecondsRed);
          if(this.seconds > 59) {
        this.seconds = 1;
        this.minutes += 1;
          } else {
              if(this.minutes >= this.warningMinutesOrange && this.seconds >= this.warningSecondsOrange && this.seconds < this.warningSecondsRed) {
                document.getElementById("bgColor").style.backgroundColor = "orange";
                this.seconds += 1;
              }else if(this.minutes>= this.warningMinutesRed && this.seconds>= this.warningSecondsRed){
                document.getElementById("bgColor").style.backgroundColor = "red";
                this.seconds += 1;
              } else {
                document.getElementById("bgColor").style.backgroundColor = "white";
                              this.seconds += 1;
              }
          }
          
      }, 1000);
      
    },
    stop() {
      clearInterval(this.timer);
    },
    reset() {
      this.minutes = 0;
      this.seconds = 0;
    }
  },
  computed: {
    formattedElapsedTime() {
      const date = new Date(null);
      date.setSeconds(this.seconds);
      date.setMinutes(this.minutes);
      const utc = date.toUTCString();
      return utc.substr(utc.indexOf(":") - 2, 8);
    }
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <div id="app">
    <button @click="start">Start</button>
    <button @click="stop">Stop</button>
    <button @click="reset">Reset</button>
      <div id="bgColor">
    <p>{{formattedElapsedTime}}</p>
    </div>
    <form>
         <input type="number" v-model="minutes" name="time_m" id="min" min="0" max="59">

        <input type="number" v-model="seconds" name="time_s" id="sec" max="59" min="0">

         <button type="button" @click="sendTime">Set time</button>
    </form>
    <form>
         <input type="number" v-model="warningMinutesOrange" name="time_m" id="minWarnOrange" min="0" max="59">

        <input type="number" v-model="warningSecondsOrange" name="time_s" id="secWarnOrange" max="59" min="0">

         <button type="button" @click="setWarning">Set warning Orange</button>
    </form>

 <form>
         <input type="number" v-model="warningMinutesRed" name="time_m1" id="minWarnRed" min="0" max="59">

        <input type="number" v-model="warningSecondsRed" name="time_s1" id="secWarnRed" max="59" min="0">

         <button type="button" @click="setWarning">Set warning Red</button>
    </form>

  </div>
</div>