I'm using asyncData to fetch some content blocks from DB, after that I want to render each block using <component :is="block.component" but I'm getting Maximum call stack size exceeded. I've tried to use fetch with fetchOnServer: true option instead asyncData but error is the same.

P.S It works using fetch with fetchOnServer: false but I need to render on server side.

In console I'm getting the message: 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
    }
  }