Why props is not updated instantly after call this.$emit() in Vue2?

I'm curious that why the prop is not updated after call this.$emit() immediately? Instead, the updated value only can be obtained after some delay (such as in the this.$nextTick()).

The following code show the example, after click and execute the updateString function, the first console.log still print the initial empty string(""), but in the $nextTick() block, the latest updated string ("a new string") can be obtained.

I haven't found any reference relative to this problem in vue official doc, if someone can provide it, I would be very grateful, thanks.

codesandbox

Parent.vue

<template>
  <div id="parent">
    <UpdateProps :string="string" @update-string="updateString" />
  </div>
</template>

<script>
import UpdateProps from "./UpdateProps";

export default {
  name: "Parent",
  components: {
    UpdateProps,
  },
  data() {
    return {
      string: "",
    };
  },
  methods: {
    updateString(newString) {
      this.string = newString;
    },
  },
};
</script>

Child.vue

<template>
  <div @click="updateString">update string</div>
</template>

<script>
export default {
  name: "Child",
  props: {
    string: String,
  },
  emits: ["update-string"],
  methods: {
    updateString() {
      this.$emit("update-string", "a new string");
      console.log("updateString currently: ", this.string); // will print ""

      this.$nextTick(() => {
        console.log("updateString in $nextTick: ", this.string); // will print "a new string"
      });
    },
  },
};
</script>

Here is the order of events:

1. The update event is emitted
2. The value in the parent is updated and parent is marked as changed
3. In the child, the function finishes after printing the first statement to console and registering the callback to nextTick
4. Vue checks what has changed and updates the virtual DOM, in this case the data binding to the child
5. DOM is updated (no changes in this case)
6. The callback to nextTick is run, printing the updated prop value

So Vue waits until the current operation has finished before updating the data binding to the child. This allows to process all changes together, which is more efficient. DOM update timing is described in the reactivity fundamentals section:
>When you mutate reactive state, the DOM is updated automatically. However, it should be noted that the DOM updates are not applied synchronously. Instead, Vue buffers them until the "next tick" in the update cycle to ensure that each component updates only once no matter how many state changes you have made.