Vue.jsでオブジェクトをwatchする方法

Vue.jsではwatchで変数を監視し、値が変化したら処理を実行することが可能です。しかし、監視対象がオブジェクトの場合、普通に下記のように記述しても、オブジェクト内のプロパティの値が変わっても検知してくれません。

    watch:{
        obj: function(newData, oldData){
            処理
        }
    },

オブジェクト内のプロパティが何か一つでも変化した場合を検知するには次のように記述します。deepをつけることで各プロパティまで見てくれるようになります。

    watch: {
     obj: {
        handler: function (newData, oldData) {
          処理
        },
        deep: true
      }
    }

オブジェクト内の特定のプロパティのみを検知するには次のように記述します。

    watch:{
        obj.name: function(newData, oldData){
            処理
        }
    },

ちなみにプロパティ名が数字の場合はシングルコーテーションでくくれば大丈夫です。

    watch:{
        'obj.10': function(newData, oldData){
            処理
        }
    },