Trigger a watch function whenever any variable is changed in Vue.js

Question

Is there a way I can trigger a Vue.js function whenever a variable within the app changed?

var vm = new Vue({
  el: '#demo',
  data: {
    variable1: 'Foo',
    variable2: 'Bar',
    .....
    .....
    variablen: 'Foo Bar'
  },
  watch: {
    <<any variable>>: function(){
      console.log('any of these variables changed');
    }
  }
})

Answer 1

First of all, I agree with all comments saying that 50 fields sound like a code smell and that code probably need to be refactored.

Beside that, vue allows you to watch for whole data object using $data watch and explicitly set it as deep

  watch: {
    '$data': {
      handler: function(newValue) {
        console.log('Current vaules:' + newValue.FirstName + ' ' + newValue.LastName);
      },
      deep: true
    }
  }

Please see this working fiddle and this watch documentation extract

Option: deep

To also detect nested value changes inside Objects, you need to pass in deep: true in the options argument. Note that you don’t need to do so to listen for Array mutations.

Warning

As @BelminBedak remarks, this example only demonstrates that it is possible to archive but not recommended for production environments.