Lack of information about order of calling watcher vs callback in Vue 2 vs. Vue 3

[aghArdeshir]

Hi. There is a breaking change for Vue 2 -> Vue 3 that had me for almost 1 full day to find the root cause. And it is not mentioned in the migration guide.

This example:

<template>
  <input
    autofocus
    type="number"
    v-model="count"
    @input="countChangedCallback"
  />
</template>

<script>
export default {
  data: function () {
    return {
      count: 0,
    };
  },

  watch: {
    count() {
      console.log('watch called');
    },
  },

  methods: {
    countChangedCallback() {
      console.log('callback called');
    },
  },
};
</script>

Running the app and changing the input you can see the order in which the console.logs are called are different. This is what happens in Vue 2 app:

callback called
watch called

and this is what happens in Vue 3 app:

watch called
callback called

I think it is important to note about it, because it can have an effect on applications too (rather that only interfering with libraries). And with more complicated use cases (read "legacy code") this can lead to long hours of debugging. (took me 1 day or so to find about it, because it led to a bug in our application)