title: Vue Does not Rendering array update view when the array value is changed
body: <p>Vue app uses <code>v-for</code> for rendering the array or list normally.<br>
  This is an example.<br>
  <a href="https://jsfiddle.net/gzvrLny2/8/" rel="nofollow noreferrer">JsFiddle Example</a></p>
  
  <pre class="lang-js prettyprint-override"><code> new Vue({
    el:'#mainapp',
    data:{
      items:[0,0, 0]
    },
    methods:{
      updateVaule:function(index){
        this.items[index]++;
        alert('current value'+this.items[index]);
      }
    }
  })
  
  //Html file
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>    &lt;div id="mainapp"&gt;
        &lt;span v-for="(item,index) in items" v-on:click="updateVaule(index)"&gt;{{item}}&lt;/span&gt;
      &lt;/div&gt;
  </code></pre>
  
  
  
  <p>But when the user clicking the <code>span</code> tag, the view is not updated though value of <code>items</code> had been changed.<br>
  I've tried to add <code>v-bind:key=index</code> to the <code>span</code> tag, but this didn't affect anything.<br>
  To render the updated array, how does the app have to work?<br>
  What am I wrong?  </p>