Version

3.0.11

Reproduction link

https://codesandbox.io/s/brave-thunder-1px0d?file=/src/App.vue

Steps to reproduce

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js   TypeScript App" />
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import HelloWorld from "@/components/HelloWorld.vue"; // @ is an alias to /src

export default defineComponent({
  name: "Home",
  components: {
    HelloWorld,
  },
});
</script>

can hot update, but

import { defineComponent } from "vue";
import HelloWorld from "@/components/HelloWorld.vue"; // @ is an alias to /src

export default defineComponent({
  name: "Home",
  setup() {
    return () => <div class="home">
      <img alt="Vue logo" src="../assets/logo.png" />
      <HelloWorld msg="Welcome to Your Vue.js   TypeScript App" />
    </div>
  }
});

this is not hot update when modify content, which caused bad experience when developing

What is expected?

should hot update not matter the template is defined in vue template or in setup function

What is actually happening?

always reload the page when the template is defined in setup function

Open the link you provided, edit Home.jsx, you can see that it can be hot updated.