title: multiple countdown timer with Nuxt
body: <p>I have an array of some people taking up a particular task, , each of them has a timer that ticks off the moment they pick the task, my problem is how to show the timer on the DOM, i sort of have a way to print it to the console already;</p>
  
  <pre><code>//in my methods: the time calc takes in two arguments to calculate the countdown
  
   },
    data() {
      return {
        id: this.$route.params.singletask,
        loading: false,
        task: {},
        second: 1000,
        time: "Time Remaining:",
        minute: this.second * 60,
        hour: this.minute * 60,
        day: this.hour * 24,
        seconds: 0,
        minutes: 0,
        hours: 0,
        days: 0,
        image: "",
        centerDialogVisible: false,
        task_states: []
      };
    },
    methods: {
      async viewTask() {
        this.loading = true;
        try {
          let response = await this.$http.get("/task/" + this.id + "/show");
          console.log(response);
          this.task = response.data.data;
          console.log(this.task);
          this.task_states = response.data.data.task_states;
          this.task_states.forEach((task, i) =&gt; {
            task.obj = {};
          });
          console.log(this.task_states);
          // to calculate countdown for each taskState
          this.task_states.forEach((taskState, index) =&gt; {
            let countDown = new Date(taskState.end_date).getTime();
            let x = setInterval(() =&gt; {
              let now = new Date().getTime();
              let distance = countDown - 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(second, hour, day, minute);
              // return seconds, hours, days, minutes;
              taskState.obj.seconds = seconds;
              taskState.hours = hours;
              taskState.obj.days = days;
              taskState.obj.minutes = minutes;
              console.log(taskState.obj.seconds);
  
              //do something later when date is reached
              if (distance &lt; 0) {
                clearInterval(x);
                this.time = "Time Ellapsed";
              }
            }, 1000);
            // this.task_states[index].obj = obj;
            // console.log(this.task_states);
          });
        } catch (err) {
          console.log(err);
        }
        this.loading = false;
      },
  
  </code></pre>
  
  <p>in the HTML i have something like this</p>
  
  <pre><code>     &lt;div class="d-flex" v-if="task_state.obj"&gt;
                            &lt;h6&gt;{{ time }}&lt;/h6&gt;
                            &lt;ul class="my-auto ml-1"&gt;
                              &lt;li&gt;
                                &lt;span class="time" id="days"&gt;
                                  &lt;b&gt;{{ task_state.obj.days }}&lt;/b&gt; d
                                &lt;/span&gt;
                              &lt;/li&gt;
                              &lt;li&gt;
                                &lt;span class="time" id="hours"&gt;
                                  &lt;b&gt;{{ task_state.obj.hours }}&lt;/b&gt; h
                                &lt;/span&gt;
                              &lt;/li&gt;
                              &lt;li&gt;
                                &lt;span class="time" id="minutes"&gt;
                                  &lt;b&gt;{{ task_state.obj.minutes }}&lt;/b&gt; min
                                &lt;/span&gt;
                              &lt;/li&gt;
                              &lt;li&gt;
                                &lt;span class="time" id="seconds"&gt;
                                  &lt;b&gt;{{ task_state.obj.seconds}}&lt;/b&gt; sec
                                &lt;/span&gt;
                              &lt;/li&gt;
                            &lt;/ul&gt;
                          &lt;/div&gt;
                        &lt;/div&gt;
  </code></pre>
  
  <p>it successfully pribts to the console, but i don't know how to go about showing it on the DOM</p>