$watch multiple properties for single callback

What do you think about being able to $watch over an array of data properties for a given callback?

$watch(['x', 'y', 'z'], function() { 
  // do something 
});

// or 

$watch('x', 'y', 'z', function() { 
  // do something
});

Not exactly pressing as I can easily make do with multiple $watch statements.

[sirlancelot]

For this, I would just build a computed property which is derived from your desired properties, then watch that:

const $app = new Vue({
    computed: {
        compoundProperty() {
            // `.join()` because we don't care about the return value.
            return [this.x, this.y, this.z].join()
        }
    },
    watch: {
        compundProperty() {
            // do something
        }
    }
})

UPDATE To skip the performance penalty of allocating and discarding an array, you can comma-separate all the dependent values, and finally return something that will always be different (Date.now() taking from comments below this):

computed: {
    computedProperty() {
        return this.x, this.y, this.z, Date.now();
    }
}

Some linters might complain, but it’s perfectly valid JS.

[yyx990803]

FYI you can directly watch a getter via $watch without the need for a separate computed property:

this.$watch(vm => [vm.x, vm.y, vm.z].join(), val => {
  // ...
})

https://vuejs.org/v2/api/#vm-watch