How to use <suspense></suspense> with <components :is=xxx> ?

[gyhyfj]

The document shows this example:

<RouterView v-slot="{ Component }">
  <template v-if="Component">
    <Transition mode="out-in">
      <KeepAlive>
        <Suspense>
          <!-- main-->
          <component :is="Component"></component>

          <!-- loading -->
          <template #fallback>
            loading...
          </template>
        </Suspense>
      </KeepAlive>
    </Transition>
  </template>
</RouterView>

However, what if I don't need vue-router here, I just need to toggle async components by <component :is="xxx" /> ?
How can I make it? I'm blocked now ...

[baiwusanyu-c]

https://sfc.vuejs.org/#eNqVUsFu2zAM/RVOO9gBUjkYsIuXFBh62m3Ahp10UR05U2dThiQnKwL/+yhZTu1kLVCfTJF8fHx8Z/a16/ixV6xkW6/arpFe3QsE+rY/etcpdAq8bpXp/U6wjWApS/mpHj7uVS37xl9SlKxM2xlU6KHUjjofKKbmbXFJvAAVV5MX2LVsmkdZ/ZmD7/VxFgI8GPRhVGPkXuOBcz4rLubVN7O2xbQmPSyyFLrK6i4Q1cTZejgDbapRhWXiDmuwqoYBamtayEjH7FIbatI7L0IQZKa0QPU3FiTRriHzcyCGslUlZHSdbB1ip3zf5SuISYDKoKPOZyrT1S/Z9Ap2gUqeIYFkqy9jGXX9HG+XU+/ufmqHRSs/JoAs/mSpeVjD580mQI2xJQoWXyAC48jtGi89DhFnEDisgrJJS7Zmo0B3rez4kzNI1ouYIiWcYOU0RTASLcSC/fa+c2VRuLoKSj45buyhoD9uewwO5cq1d4/WnJyyBCzYNJ5GTvrf2HxmpW9ZG3QNRvoQU8k4/zcFNBIP5OtA9w2DLLwRpXzH9ZOtRwdI94zVtQ/kSWoPqE7wnaZop/LcKmeao1qe+8YIqSrvcSSwX63h02Y8dzzea3dPVyVKseRyV4Fs+AdY2mZr

I don't know if this meets your usage scenario, if it solves your problem, please mark as answer

[gyhyfj]

Thank you, it works well. But it still cannot work in <KeepAlive> component, here is the example.
If I toggle dynamic component when the current one is pending, the app will shut down soon.

My final solution is almost this one, use <Suspense> in every component and put it's content in itself's child component.... really inelegant.

Besides, I used defineAsyncComponent in my project, but I have no idea why it cannot work in playground...

Thank you very much for your solution and your visit from SH ^^