Vite Vue 3 hot reload not working with typescript files separate from .vue component

Question

I have a Vue 3 application with Vite 4 configured and the hot reload doesn't work when I make a change to the typescript file.

I have the following structure:

• MyComponent.vue
• MyComponent.ts

Where MyComponent imports the .ts script and scss file, when I make a change in the .vue file the hot reload works, now when I change the typescript file that is imported in MyComponent.vue it doesn't work but it displays the log from the hot reload in the browser console.

MyComponent.vue

<template>
  <div>
    <p>Hello world</p>
  </div>
</template>

<script src="./MyComponent.ts" lang="ts"></script>
<style src="./MyComponent.scss" scoped lang="scss"></style>

MyComponent.ts

import { defineComponent } from 'vue';

export default defineComponent({
  name: 'MyComponent',
  data() {
    return {
      text: []
    };
  }
});

vite.config.ts

 export default defineConfig({
  server: {
    port: 5173
  },
  plugins: [
    vue(),
    Components({
      resolvers: [AntDesignVueResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
    extensions: ['.js', '.ts', '.vue']
  }
});