vue js watch multiple properties with single handler

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>

More info on the Vue API docs for vm.$watch.

like this:

data() {
  return {
    propa: '',
    propb: ''
  }
},
computed: {
  changeData() {
    const { propa, propb } = this
    return {
      propa,
      propb
    }
  }
},
watch: {
  changeData: {
    handler: function(val) {
      console.log('value change: ', val)
    },
    deep: true
  }
}

First, your definition could be simplified. doSomething does not appear to be a method on the Vue, so your watch could just be

watch:{
    propa: doSomething,
    propb: doSomething
}

Second, sometimes it's important to remember Vue definition objects are just plain javascript objects. They can be manipulated.

If you wanted to watch every property in your data object, you could do something like this

function doSomething(after, before){
  console.log(after,before);
}

function buildWatch(def){
  if (!def.watch)
    def.watch = {};
  for (let prop of Object.keys(def.data))
    def.watch[prop] = doSomething;
  return def;
}

let vueDefinition = {
  data:{
    propa: "testing",
    propb: "testing2",
    propc: "testing3"
  }
}

export default buildWatch(vueDefinition)

If you wanted to watch only some defined list of your properties:

// First argument is the definition, the rest are property names
function buildWatch(def){
  if (!def.watch)
    def.watch = {};
  const properties = Array.prototype.slice.call(arguments,1); 
  for (let prop of properties)
    def.watch[prop] = doSomething;
  return def;
}

export default buildWatch(vueDefinition, "propa", "propb")

For Vue typescript you can do like this. Tested.

  @Watch('varA')
  @Watch('varB')
  private oneOfAboveChanged(newVal) {
    console.log(newVal)
  }

My resolution for vue2:

export default {
  data() {
    return {
      status: null,
      name: null,
      date: null,
      mobile: null,
      page: 1,
    }
  },
  watch: {
    ...["status", "name", "date", "mobile", "page"].reduce((acc, currentKey) => {
      acc[currentKey] = (newValue) => {
        // doSomething
        // console.log(newValue, currentKey)
      }
      return acc
    }, {}),
  }
}

vm.$data

If you want to listen to all the properties inside data(), you can use this.$data

<script>
export default {
  data () {
    return {
      propA: 'Hello',
      propB: 'world'
    }
  }
  watch: {
    $data (newValue) { // Watches for any changes in data()
      // Do something with the new data
    }    
  }
}
</script>

Watcher for Vue3 accepts an array of callbacks also.

const resourceDetalisation = ref({
    year: new Date().getFullYear(),
    month: new Date().getMonth() + 1,
})

watch(
    [() => resourceDetalisation.value.year, () => resourceDetalisation.value.month],
    ([year, month]) => {
        console.log(year + ' ' + month)
    }
)

Old question but the answer still may be useful for those who are still working in vue 1.

You can watch multiple props by wrapping them in quotes:

data() {
   return {
      foo: {
         prop1: 1,
         prop2: 2,
      }
   }
}
watch: {
    '[foo.prop1, foo.prop2]'(newVal, oldVal) {
        //do sth
        console.log(newVal); // prints ([prop1, prop2])
        console.log(oldVal); // prints ([prop1, prop2])
    }
}

Old question but for those who are using the Vue composition API the answer is to use the array syntax in your watcher:

watch([fooRef, barRef]) => {
  doSomething();
})

The API will also give you old and new values in an array:

watch([fooRef, barRef], ([foo, bar], [prevFoo, prevBar]) => {
  doSomething();
})

Docs

If someone is looking for this in 2023 and is using Vue3, another possibility and a better option is to just use watchEffect.

https://vuejs.org/api/reactivity-core.html#watcheffect

This currently works perfectly in vue3 vuetify. Nothing above worked for me.

data() 
  {
    return {
      prop1: 75000,
      prop2: 12000,
      prop3: 8000,
      prop4: 30000,
      prop5: 5000,
      prop6: 8000,
      prop7: 12000,
}
};
computed: {
    combined() 
    {
      return `${this.prop1}
             |${this.prop2}
             |${this.prop3}
             |${this.prop4}
             |${this.prop5}
             |${this.prop6}
             |${this.prop7}
             `; 
    },
  },
watch: 
  { 
    combined(newVal, oldVal) 
    {
      const newValues = newVal.split('|').map(Number);
      const newValuesum = newValues.reduce
                          ((acc: any, item: any) => acc + item, 0);
    },
  }

Vue provides a Deep Watcher. You can implement it like so:

watch(() => {
  return {
    firstSource: someRef.value,
    secondSource: anotherRef.value
  }
}, (newVal, oldVal) => {
  //  this watcher will be triggered on change of any of two provided sources
  // newVal = { firstSource: newData, secondSource: newData }
  handler()
})

This might be handy for your case.
You can find it in the docs for further reading

Below is very basic example of watch for Nuxt 3

<script setup>
const state = reactive({
  v1: "",
  v2: "",
});

// watch single value
watch(
  () => state.v1,
  (newVal, oldValue) => {
    // .....
  }
);

// watch multiple value
watch(
  () => [state.v1, state.v2],
  ([newV1, newV2], [oldV1, oldV2]) => {
    // .....
  }
);
</script>