Q:

how to use Vue watch in objects

I am pretty new to watch and trying to figure out why my watch isn't triggering when accessing it as an object. I saw this thread, but it isn't clear to me if my problem is the same. Following is my simplified example (full example got more properties and properties with array
<div id="app">
  <input type="text" v-model.lazy="userInfo.name"> {{userInfo.name}}
</div>

JS
new Vue({
  el: "#app",
  data: {
  userInfo: {
            name: ''
  }

  },
  methods: {

  },
  watch: {
    userInfo : {
            name(oldVal, newVal){
            console.log(oldVal +" " + newVal)
      },
    },
     deep: true
  }
})

Link to the JSFiddle

A:

Change the watcher to something like this:
new Vue({
  el: "#app",
  data: {
    userInfo: {
      name: "null"
    }
  },
  methods: {},
  watch: {
    "userInfo.name": function(oldVal, newVal) {
      console.log(oldVal + " " + newVal);
    }
  }
});

Refer to the documentation for the same here.
Check the last example.

