Key increment in combination with await makes a component jump out of its parent HTML node. Is it a bug?

[progmars]

I have encountered a weird issue in my app when a component unexpectedly jumps out of its parent HTML node.

I have a bit of a messy model requiring full component refresh sometimes and I've seen a few people recommending :key increment approach as a quick & dirty workaround for full refresh. Everything worked fine in general. Then I happened to increment the key twice in my flow, separated by an await, and the component did something strange - it jumped to another place in my app!

I managed to reduce it to a minimal use case available here: https://playcode.io/2232962

When you click the button, the key will be incremented and await will be executed, and then you will notice that the red rectangle has jumped out of its former parent green rectangle.

If you remove the await before the doIt call or if you remove one of the increments, or if the setup of the JumpTest component does not do its own inner await, it works just fine and you can click the button many times with no jumping.

I will clean up my flow of execution to avoid having await between key increments. The second increment definitely should not be needed. Still, I'm puzzled and curious about the reasons behind this behavior.

If someone wants to try it locally, here's the relevant code:

App.vue:

<script setup>
import { ref } from "vue";
import JumpTest from "./JumpTest.vue";

const keyReloader = ref(0);

const doit = async () => {
  keyReloader.value += 1;
};

const handleIncreaseKey = async () => {
  await doit();
  keyReloader.value += 1;
};
</script>

<template>
  <div style="width: 100%; height: 100%;">
    <button @click="handleIncreaseKey">Increase key!</button>
    <Suspense>
      <div style="width: 100%; height: 100%; border: 2px solid blue;">
        <div style="width: 50%; height: 50%; border: 2px solid green;">
          <JumpTest :key="keyReloader" />
        </div>
      </div>
    </Suspense>
  </div>

</template>

JumpTest.vue:

<script setup>
const doSomething = async () => {
};

await doSomething();
</script>

<template>
  <div style="height: 50%; width: 50%; background-color: red;">
  </div>
</template>

index.html:

<div id="app"></div>
<script src="script.js"></script>

package.json:

{
  "dependencies": {
    "vue": "3.5.13"
  }
}

script.js:

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')