<div id="watch-example">
  <p>
    Write something:
    <input v-model="nested.text">
  </p>
  <p>{{ result }}</p>
  <br>
  <p>
    Write something:
    <input v-model="nested2.text">
  </p>
  <p>{{ result2 }}</p>
</div>
new Vue({
  el: '#watch-example',
  data: {
    result: 'Waiting for changes...',
    nested: {
      text : ''
    },
    result2: 'Waiting for changes...',
    nested2: {
      text : ''
    }
  },
  watch: {
    nested: function (newValue, oldValue) {
        this.result = newValue.text
    },
    nested2: {
      handler: function(newValue) {
        this.result2 = newValue.text
      },
      deep: true
    }
  },
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdn.jsdelivr.net/npm/vue/dist/vue.js