参考にさせて頂いたページ
サンプルコード
連想配列のObjectを丸ごと監視したい場合は、処理はhandler: function(){},の方に記述して、deep: true,が必要です。
連想配列のObjectを個々に監視したい場合は、watchのキーをクォーテーションで囲って'individuallyObj.aaa'
のようにします。
<div id="vue-app"> <h2>シンプル</h2> <input type="text" v-model="hoge"> <h2>配列</h2> <input type="text" v-model="hogeArr[0]"> <input type="text" v-model="hogeArr[1]"> <input type="text" v-model="hogeArr[2]"> <h2>連想配列 丸ごと</h2> <input type="text" v-model="hogeObj.aaa"> <input type="text" v-model="hogeObj.bbb"> <h2>連想配列 個々</h2> <input type="text" v-model="individuallyObj.aaa"> <input type="text" v-model="individuallyObj.bbb"> </div> <script src="js/vue.js"></script> <script> new Vue({ el: '#vue-app', data: { hoge: 'str', hogeArr: [ 'arr-0', 'arr-1', 'arr-2', ], hogeObj: { aaa: 'obj-aaa', bbb: 'obj-bbb', }, individuallyObj: { aaa: 'object個々に監視aaa', bbb: 'object個々に監視bbb', }, }, watch: { hoge: function(val){ console.log(val); }, hogeArr: function(val){ console.log(val); }, hogeObj: { handler: function(val){ console.log(val); console.log(val.aaa); console.log(val.bbb); }, deep: true, }, 'individuallyObj.aaa': function(val){ console.log(val); }, 'individuallyObj.bbb': function(val){ console.log(val); }, }, }); </script>