title: How to add independent increment counter to new item in array. Vue.js
body: <p>In my example, i have two arrays. 
  First  array - values, second - zeros for incremental counter.
  Any new item have own counter button for him. 
  But it is not working, and i do not know why. If i push several buttons, i see chaotioc behavior in arrays</p>
  
  <p><a href="https://jsfiddle.net/VeVeO/jqr0nzte/27/" rel="nofollow noreferrer">JSfiddle</a></p>
  
  <ol>
  <li>How to repair it?</li>
  <li><p>How to do counter function without button?</p>
  
  <p>Example: if i loading page, i see 3 elements. Counters begining counting  from 0. After 10 seconds i add new element. Old counters continue to work, but counter in new element start from 0.</p></li>
  </ol>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>new Vue({
   el: '#page',
    data: {
     arr: [1, 2 ,3],
      count: [0, 0 ,0]
    },
    methods: {
     addEll: function() {
       this.arr.push(this.arr.length + 1);
        this.count.push(0);
      },
      incrementio: function(val) {
          interval = setInterval(() =&gt; {
          Vue.set(this.count, this.count[val], 0);
          this.count[val]++;
        }, 1000);
       },
    },
    computed: {
     visibleList: function(){
       return this.arr;
      }
    }
    
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://unpkg.com/vue"&gt;&lt;/script&gt;
  
  &lt;div id="page"&gt;
  &lt;button v-on:click="addEll"&gt;Add element&lt;/button&gt;
  {{ arr }}
  {{ count }}
    &lt;ul&gt;
      &lt;li v-for="(item, index) in visibleList"&gt;
          {{item}}
          &lt;button v-on:click="incrementio(index)"&gt;Counter: {{count[index]}}&lt;/button&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>