Componentes asíncronos en Vue 3 con Suspense

En Vue 3 y gracias a la API de Composición tenemos la posibilidad de definir componentes asíncronos utilizando el método setup de la siguiente forma:

<template>
    <div>{{ message }}</div>
</template>

<script>
    export default {
        name: "AsyncComponent",
        async setup() {
            await new Promise(resolve => setTimeout(resolve, 3000))
            return {
                message: "AsyncComponent loaded"
            }
        }
    }
</script>

Puedes ver que el método setup utiliza async y que resolvemos una promesa con await, hasta aquí todo bien, pero... ¿cómo podemos utilizar este componente en Vue 3? Si hacemos lo siguiente directamente nuestro componente no se mostrará:

<template>
  <async-component />
</template>

<script>
import AsyncComponent from "./AsyncComponent.vue";
export default {
  name: 'RootComponent',
  components: {AsyncComponent}
}
</script>

Componentes asíncronos en Vue 3 Para cargar componentes asíncronos en Vue 3 de forma correcta y que su contenido sólo se muestre una vez todas las promesas involucradas hayan sido resueltas debemos utilizar Suspense, un componente nuevo de Vue 3 que hace la magia.

<template>
  <Suspense>
    <template #default>
      <async-component />
    </template>
    <template #fallback>
      Loading component....
    </template>
  </Suspense>
</template>

<script>
import AsyncComponent from "./AsyncComponent.vue";
export default {
  name: 'RootComponent',
  components: {AsyncComponent},
}
</script>