Vue.jsのnested dataをwatchする

環境

• Vue 2.5.17

dataに定義されている連想配列の内部をwatchしたい

ダメな例

new Vue({
  el: '#app',
  data: {
    obj: {
      message: ''
    },
    result: ''
  },
  watch: {
    obj.message: function(val){
      this.result = val;
    }
  }
});

obj.messageはキー名としてアウト。。。
じゃあどうやって監視するのか調べたところ

• handlerでobj全体を監視する方法
• 文字リテラルでキー名を指定する方法

があった。

handlerでobj全体を監視する方法

new Vue({
  el: '#app1',
  data: {
    obj: {
      message: '',
      other: ''
    },
    result: ''
  },
  watch: {
    obj: {
      handler: function(val) {
        this.result = val.message;
      },
      deep: true
    }
  }
});

この場合はobjの他の要素も監視されるので扱いには注意。

文字リテラルでキー名を指定する方法

new Vue({
  el: '#app2',
  data: {
    obj: {
      message: '',
      other: ''
    },
    result: ''
  },
  watch: {
    'obj.message': function(val) {
      this.result = val;
    }
  }
});

この場合はobj.messageのみが監視される。

jsfiddleに上記コードを書いた、結構便利だったので検証などで利用していきたい。。。
https://jsfiddle.net/nakata_kazuhiro/5y1rctap/31/

参考

Vue.js 公式
vue.js 2.x その0009 watchで配列(array)や連想配列(object)を監視する