Vueテンプレートに配列されているときにデータを反応させる方法

Question

<template> 
    <button v-on:click="modify"> modify </button> 
    <div v-model="lists">{{ lists[0] }}</div> 
</template> 

<script> 
export default { 

methods: { 
    modify: function() { 
     console.log(this.lists) 
     this.lists[0][0] = 2 
     console.log(this.lists) 
    }, 

    data: function() { 
    return { 
     lists: [[1,2,3],[2,3,3]] 
    } 
    } 
} 
</script> 

テンプレートの配列が更新されていないようです。しかし、ログコンソールが変更されました。

データが配列のときにどのように反応させるのですか？

実際に何が起こっている：

Before clicking modify 
<div v-model="lists">{{ lists[0] }}</div> # produce 1 
After clicking modify 
<div v-model="lists">{{ lists[0] }}</div> #produce 1 

期待されているもの：Vueの中でインデックスで配列を更新する際に

Before clicking modify 
<div v-model="lists">{{ lists[0] }}</div> # produce 1 
After clicking modify 
<div v-model="lists">{{ lists[0] }}</div> #produce 2 

Answer 1

はこれがcaveatです。これを試して。

this.lists[0].splice(0,1,2)