Vue.js independent stopwatches

independent stopwatches start with the addition of a new element

by VeVeO

HTML

<div id="page">
  <button v-on:click="addElement">Add</button> {{ arr }}
  <ul>
    <li v-for="(item, index) in arr">
      {{item.value}} Counter: {{item.counter}} <button v-on:click="deleteElement(index)">Delete element</button>
    </li>
  </ul>
</div>

Vue

new Vue({
  el: '#page',
  data: {
  //If we want to start with empty array
  //arr: [],
    arr: [{ value: 1, counter: 0 }],
    interval: null
  },
  mounted () {
    this.interval = setInterval(() => {
      this.arr.map(x => x.counter++);
    }, 1000);
  },
  beforeDestroy () {
    clearInterval(this.interval);
  },
  methods: {
    addElement () {
      this.arr.push({
        value: this.arr.length + 1,
        counter: 0
      });
    },
     deleteElement: function(index) {
      this.arr.splice(index, 1);
    },
  }
})