Vue.js custom watchers

Sometimes you need to have a custom watcher to react to data changes.

For example, you need to check if the user updated his/her name in your app not just triggered a change event. You can do that by adding a custom watcher for a name property that will check if the value indeed changed.

var vm = new Vue({
  el: '#demo',
  data: {
    name: '',
    nameChanged: false
  },
  watch: {
    name (val, oldVal) {
      if (val !== oldVal) this.nameChanged = true
    }
  }
})

If the name changed a nameChanged property will be set to true.