Vue.jsのwatchで連想配列が監視できない場合の解決法

こんにちは、macoです。

Vue.jsの値の変更を監視できるwatch機能はすごく便利ですが、連想配列で値を変更した場合にうまく動作しなかったので、解決方法を解説します。

連想配列でwatchが動かない例

watchではuser直下の値は監視できますが、連想配列の小要素までは監視することができません。

// 省略

data: {
    user: {
        id: 1,
        name: 'hoge'
    }
},
watch: {
    user: function(){
        // 実行されない
    }
}

// 省略

連想配列でwatchが動く例

handlerの中に処理を入れ、deepというプロパティを追加しました。

// 省略

data: {
    user: {
        id: 1,
        name: 'hoge'
    }
},
watch: {
    user: {
        handler: function(){
            // 実行される
        },
        deep: true
    }
}

// 省略

これで無事に連想配列を監視することができました。