title: how to use Vue watch in objects
body: <p>I am pretty new to <code>watch</code> and trying to figure out why my watch isn't triggering when accessing it as an object. I saw <a href="https://stackoverflow.com/questions/44760474/vue-js-watching-deep-properties">this</a> 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</p>
  
  <pre><code>&lt;div id="app"&gt;
    &lt;input type="text" v-model.lazy="userInfo.name"&gt; {{userInfo.name}}
  &lt;/div&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>new Vue({
    el: "#app",
    data: {
    userInfo: {
              name: ''
    }
  
    },
    methods: {
  
    },
    watch: {
      userInfo : {
              name(oldVal, newVal){
              console.log(oldVal +" " + newVal)
        },
      },
       deep: true
    }
  })
  </code></pre>
  
  <p>Link to the <a href="https://jsfiddle.net/mahassan/nsx87rd3/17/" rel="nofollow noreferrer">JSFiddle</a></p>