Vue.js - 更新配列項目の値がページに更新されません

Question

「テスト」は私のVUEデータにオブジェクトの配列です

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; 
    } 
    } 
}) 

問題は、私は配列」の要素の値を変更した場合ということです"、ログは値が変更されたことを示していますが、ページ上では更新されません。一方、 "number"の値を変更すると、ページ上の "number"と "array"の両方の値が更新されます。

<section id="content"> 
    <div>Value in array: {{ test[0].array[0] }}</div> 
    <div>Value in number: {{ number }}</div> 
    <!-- {{ setNumber() }} --> 
    {{ setArray() }} 
</section> 

<!-- Loading Vue.js --> 
<script src="https://unpkg.com/vue"></script> 
<script src="https://cdn.jsdelivr.net/vue.resource/1.3.1/vue-resource.min.js"></script> 

ページを「アレイ」アップデートに対応させるにはどうすればよいですか？
ここにJsFiddleがあります。https://jsfiddle.net/zcbh4esr/

Answer 1

これはarray change caveatsが原因です。

ではなく

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; 
     console.log(this.number); 
    }, 
    setArray: function() { 
     //this.test[0].array[0] = 9; 
     this.$set(this.test[0].array, 0, 9); 
     console.log(this.test[0].array[0]); 
    } 
    } 
}); 

ここの魅力のように働いたfiddle