In suspense, I import four different components asynchronously. When I click the button to switch, I find that loading slots in suspense will only be shown for the first time, but it doesn't work when I switch again. How to solve this problem? Does Suspense not support use with dynamic routing?
<template>
<div class="app">
<button @click="index = 0">1</button>
<button @click="index = 1">2</button>
<button @click="index = 2">3</button>
<button @click="index = 3">4</button>
<Suspense>
<component :is="component[index]"></component>
<template #fallback>
<div>Loading...</div>
</template>
</Suspense>
</div>
</template>
<script setup lang="ts">
import { defineAsyncComponent, ref } from 'vue'
const son1 = defineAsyncComponent(() => import('./components/son1.vue'))
const son2 = defineAsyncComponent(() => import('./components/son2.vue'))
const son3 = defineAsyncComponent(() => import('./components/son3.vue'))
const son4 = defineAsyncComponent(() => import('./components/son4.vue'))
const component = [son1, son2, son3, son4]
const index = ref(0)
</script>
<style scoped lang="less"></style>
