[Vuejs]-Create a countdown in vuejs with momentjs

Keep time with a numeric value. Present time with a string value. The watcher’s job is to notice changes in the numeric time and convert it to a string.

It’s definitely not a watcher’s job to setInterval(). You’ll end up starting new timers willy nilly.

Vue.config.productionTip = false;
Vue.config.devtools = false;

var app = new Vue({
  el: '#app',
  data: {
    timeLeft: 0,
    timeLeftString: '',
    timer: null
  },
  watch: {
    timeLeft: function (val) {
      const timeZero = moment("1900-01-01 00:00:00");
      this.timeLeftString = timeZero.add(val, 'seconds').format("HH:mm:ss")
    },
  },
  mounted() {
    this.timeLeft = 63;
    this.timer = setInterval(() => {
      if (this.timeLeft <= 0) {
        clearInterval(this.timer);
        alert('Done');
      } else {
        this.timeLeft--
      }
    }, 1000)
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <h1>
    {{ timeLeftString }}
  </h1>
</div>

Without momentjs:
You can use mod (%) to extract hour minutes and date.
Code taken from article at bottom of this post. Run the setInterval on mounted or whenever you get data for deadline date time

let countDownDate = new Date("Jan 01, 2023 00:00:00").getTime(); // The deadline
let x = setInterval(() => {
   let now = new Date().getTime();
   let distance = countDownDate - now;

   let days = Math.floor(distance / (1000 * 60 * 60 * 24));
   let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
   let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
   let seconds = Math.floor((distance % (1000 * 60)) / 1000);
   console.log(days + "d " + hours + "h " + minutes + "m " + seconds + "s"); // Countdown output
  

   if (distance < 0) {
      clearInterval(x);
      console.log("Too late!") // Text at the end of the countdown
   }
}, 1000)

You can check it here https://beetrootacademy.se/blog/front-end-development/js-countdown-timer-14-lines