How to know which function trigger watch handler?

after click changeName or changeAge,both of them will trigger user’s handler,how can I know which
function trigger the handler ?

<template>
  <div>
    <button @click="changeName">change name</button>
    <button @click="changeAge">change age</button>
  </div>
</template>

<script>
export default {
  methods: {
    changeName() {
      this.user.name = 'bar';
    },
    changeAge() {
      this.user.name = 20;
    }
  },
  data() {
    return {
      user: {
        name: "foo",
        age: 18
      }
    }
  },
  watch: {
    user: {
      deep: true,
      handler() {
        debugger;
        console.log('user change');
      }
    }
  }
}
</script>

callstack in this example has related informatinos.


but int my project, only has flushCallbacks and later
image

Don’t just watch the user object as a whole, watch each property individually.

The other option could be to compare the returned val and oldVal values

I want to know where trigger the handler, compare the returned val and oldVal values doesn’t help.