vue js watch multiple properties with single handler

Update: April-2020

For people who are using Vue 3, the watch API can accept multiple sources

import { watch, ref } from 'vue';export default {  setup(() => {    const a = ref(1), b = ref('hello');    watch([a, b], ([newA, newB], [prevA, prevB]) => {      // do whatever you want    });  });};

Original answer for Vue 2

there is no official way to solve your question(see this). but you can use the computed property as a trick:

    export default {      // ...      computed: {        propertyAAndPropertyB() {          return `${this.propertyA}|${this.propertyB}`;        },      },      watch: {        propertyAAndPropertyB(newVal, oldVal) {          const [oldPropertyA, oldProvertyB] = oldVal.split('|');          const [newPropertyA, newProvertyB] = newVal.split('|');          // doSomething        },      },    }

if you just want to do something and don't care about what's new/old values.ignore two lines

    const [oldPropertyA, oldProvertyB] = oldVal.split('|');    const [newPropertyA, newProvertyB] = newVal.split('|');

Another possibility:

new Vue({  el: '#app',  data: {    name: 'Alice',    surname: 'Smith',    fullName: '' // IRL you would use a computed for this, I'm updating it using a watch just to demo how it'd be used  },  mounted() {    this.$watch(vm => [vm.name, vm.surname], val => {            this.fullName = this.name + ' ' + this.surname;          }, {      immediate: true, // run immediately      deep: true // detects changes inside objects. not needed here, but maybe in other cases    })   }});

<script src="https://unpkg.com/vue"></script><div id="app">  <div>    name:<input v-model="name">  </div>  <div>    surname:<input v-model="surname">  </div>  <div>    full name: {{ fullName }}  </div></div>