Vue3 ts setup The keepAlive cache route component is invalid

There was a problem when I used the vue3,vite,ts technology stack in my project, I'm following the official usage, but it just doesn't work.Here is the code snippet, Ask the gods for help me.
App.vue

<el-config-provider v-if="state.isLoadGlobaConfig && !themeStore.loading" :locale="locale"
:size="themeStore.userConfig.size">
<router-view v-slot="{ Component }">
<transition name="app">
<component :is="Component" />
</transition>
</router-view>
</el-config-provider>


Main.vue

caches is Array

<router-view v-slot="{ Component, route }">
<transition-group name="main-router">
<keep-alive :include="caches" :key="route.name">
<component :is="Component" :key="route.name" />
</keep-alive>
</transition-group>
</router-view>

The template 1

`

<template>...</template>
defineOptions({
name: 'Tool'
})

`
The template 2

`

<template>...</template >
defineOptions({
name: 'Tool2'
})

`