title: Vue.js - updated array item value doesn't update in page
body: <p>"test" is an array of object in my vue data</p>
  
  <pre><code>var vue = new Vue({
    el: '#content',
  
    data: {
      test: [
        {
          array: [0, 0, 0, 0]
        },
        {
          array: [0, 0, 0, 0]
        }
      ],
      number: 0
    },
  
    methods: {   
      setNumber: function(){
        this.number = 5;
      },
  
      setArray: function(){
        this.test[0].array[0] = 9;
      }
    }
  })
  </code></pre>
  
  <p>Problem is that if i change the value of an element in "array", while log shows that the value has changed, it doesn't update on the page. On the other hand, if i change value of "number", both "number" and "array" value on the page are updated. </p>
  
  <pre><code>&lt;section id="content"&gt;
    &lt;div&gt;Value in array: {{ test[0].array[0] }}&lt;/div&gt;
    &lt;div&gt;Value in number: {{ number }}&lt;/div&gt;
    &lt;!-- {{ setNumber() }} --&gt;
    {{ setArray() }}
  &lt;/section&gt;
  
  &lt;!-- Loading Vue.js --&gt;
  &lt;script src="https://unpkg.com/vue"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.jsdelivr.net/vue.resource/1.3.1/vue-resource.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>How can i make my page responsive to "array" update?<br>
  Here's the JsFiddle: <a href="https://jsfiddle.net/zcbh4esr/" rel="noreferrer">https://jsfiddle.net/zcbh4esr/</a></p>