When <keep-alive>, <component>, and defineAsyncComponent are used at the same time, there will be some problems

[HaceraI]

When I use , , defineAsyncComponent at the same time, the Component's ref works fine when it is first activated, until it is activated again, the bound ref will get undefined.

https://stackblitz.com/edit/vitejs-vite-eruauw?file=src%2FApp.vue
Are they not possible and recommended to be used together?

default.webm

[s3xysteak]

The problem is the current component instance become null in the end.

const handleSubmit = async () => {
  console.log(formComponent.value) // = `null` in the end of the video above.

  const data = await formComponent.value?.getFormData();
  console.log('data', data);
  formData.value = JSON.stringify(data);
};

Maybe you can post a dissusion or issue in the repo of vue-router.