Estoy usando asyncData para obtener algunos bloques de contenido de la base de datos, después de eso quiero representar cada bloque usando <component :is="block.component" pero estoy obteniendo el tamaño máximo de la pila de llamadas excedido . Intenté usar fetch con fetchOnServer: true en lugar asyncData pero el error es el mismo.

PD: funciona usando fetch con fetchOnServer: false pero necesito renderizar en el lado del servidor.

En la consola recibo el mensaje: Cannot stringify a function component

 <template> <div> <div v-for="block in blocks" :key="block._id"> <component :is="block.component" :content="block.content"></component> </div> </div> </template> <script> import { fetchMainBlocks } from "../services/main.js"; export default { async asyncData() { const response = await fetchMainBlocks(); const blocks = response.map(block => { return { ...block, component: () => import(`../components/main/${block.template}/${block.ver}.vue`) } }); return { blocks } }