Есть ли ограничение таблиц у компонента Univer?

есть .vue файл. В котором есть контейнеры с компонентом univer(univer.ai). 1 и 2 отображается корректно, а 3, 4 и т.п. не отображаются. В запросах к серверу ошибок нет. Если у первого контейнера поменять ссылку, то все отображается корректно.

  <div class="examples-page">
    <div class="header">
      [[ATTR]+][[@BLANK ? VAL: FACTOR=UP; SCHEMA=(COL:R0); RECORD=(ROW) | VAL: SCHEMA=(COL:R0); RECORD=(ROW)][@BLANK ?
      VAL: FACTOR=UP; SCHEMA=(COL:R0) | VAL: SCHEMA=(COL:R0)]+]+
    </div>
    <div class="container-row">
      <div ref="container1" class="univer-container"></div>
      <div ref="container2" class="univer-container"></div>
    </div>
    <div class="header">
      [[VAL]+]{2}[[VAL : RECORD=(UP{1}: THIS@COLOR==@COLOR)]+]{2}
    </div>
    <div class="container-row">
      <div ref="container3" class="univer-container"></div>
      <div ref="container4" class="univer-container"></div>
    </div>
    <div class="header">
      [[ATTR][VAL: SCHEMA=(ROW:C0); RECORD=(COL;(COL:C4))][VAL: SCHEMA=(ROW:C0); RECORD=(COL;(COL:C5))][ATTR][VAL:
      SCHEMA=(ROW:C3)]{2}][[ATTR][VAL: SCHEMA=(ROW:C0)][VAL: SCHEMA=(ROW:C0)][ATTR][VAL: SCHEMA=(ROW:C3)]{2}]+
    </div>
    <div class="container-row">
      <div ref="container5" class="univer-container"></div>
      <div ref="container6" class="univer-container"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import "@univerjs/design/lib/index.css";
import "@univerjs/ui/lib/index.css";
import "@univerjs/sheets-ui/lib/index.css";
import "@univerjs/sheets-formula/lib/index.css";

import {LocaleType, Tools, Univer, UniverInstanceType, IWorkbookData} from "@univerjs/core";
import {defaultTheme} from "@univerjs/design";
import {UniverDocsPlugin} from "@univerjs/docs";
import {UniverDocsUIPlugin} from "@univerjs/docs-ui";
import {UniverFormulaEnginePlugin} from "@univerjs/engine-formula";
import {UniverRenderEnginePlugin} from "@univerjs/engine-render";
import {UniverSheetsPlugin} from "@univerjs/sheets";
import {UniverSheetsFormulaPlugin} from "@univerjs/sheets-formula";
import {UniverSheetsUIPlugin} from "@univerjs/sheets-ui";
import {UniverUIPlugin} from "@univerjs/ui";
import {onBeforeUnmount, onMounted, ref} from "vue";
import axios from 'axios';

import {ruRU as UniverDesignRuRu} from '@univerjs/design'
import {ruRU as UniverDocsUiRuRu} from '@univerjs/docs-ui'
import {ruRU as UniverSheetsRuRu} from '@univerjs/sheets'
import {ruRU as UniverSheetsUIEnUs} from '@univerjs/sheets-ui'
import {ruRU as UniverUiRuRu} from '@univerjs/ui'

const univerRef = ref<Univer | null>(null);
const workbook1 = ref<IWorkbookData | null>(null);
const workbook2 = ref<IWorkbookData | null>(null);
const workbook3 = ref<IWorkbookData | null>(null);
const workbook4 = ref<IWorkbookData | null>(null);
const workbook5 = ref<IWorkbookData | null>(null);
const workbook6 = ref<IWorkbookData | null>(null);
const container1 = ref<HTMLElement | null>(null);
const container2 = ref<HTMLElement | null>(null);
const container3 = ref<HTMLElement | null>(null);
const container4 = ref<HTMLElement | null>(null);
const container5 = ref<HTMLElement | null>(null);
const container6 = ref<HTMLElement | null>(null);

onMounted(() => {
  container1.value = document.querySelector('.univer-container:nth-of-type(1)');
  container2.value = document.querySelector('.univer-container:nth-of-type(2)');
  container3.value = document.querySelector('.univer-container:nth-of-type(3)');
  container4.value = document.querySelector('.univer-container:nth-of-type(4)');
  container5.value = document.querySelector('.univer-container:nth-of-type(5)');
  container6.value = document.querySelector('.univer-container:nth-of-type(6)');
  fetchData();
});

onBeforeUnmount(() => {
  destroyUniver();
});

const fetchData = async () => {
  try {
    const response1 = await axios.get('http://localhost:8765/example/in/17', {
      responseType: "json",
    });
    const workbookData1 = response1.data;
    init(workbookData1, container1.value!);

    const response2 = await axios.get('http://localhost:8765/example/out/17', {
      responseType: "json",
    });
    const workbookData2 = response2.data;
    init(workbookData2, container2.value!);

    const response3 = await axios.get('http://localhost:8765/example/in/29', {
      responseType: "json",
    });
    const workbookData3 = response3.data;
    init(workbookData3, container3.value!);

    const response4 = await axios.get('http://localhost:8765/example/out/29', {
      responseType: "json",
    });
    const workbookData4 = response4.data;
    init(workbookData4, container4.value!);

    const response5 = await axios.get('http://localhost:8765/example/in/19', {
      responseType: "json",
    });
    const workbookData5 = response5.data;
    init(workbookData5, container5.value!);

    const response6 = await axios.get('http://localhost:8765/example/out/19', {
      responseType: "json",
    });
    const workbookData6 = response6.data;
    init(workbookData6, container6.value!);

  } catch (error) {
    console.error('Ошибка при загрузке данных:', error);
  }
};

const init = (data: IWorkbookData, container: HTMLElement) => {
  console.log(`Инициализация контейнера: ${container.className}`);
  const univer = new Univer({
    theme: defaultTheme,
    locale: LocaleType.RU_RU,
    locales: {
      [LocaleType.RU_RU]: Tools.deepMerge(
          UniverSheetsRuRu,
          UniverDocsUiRuRu,
          UniverSheetsUIEnUs,
          UniverUiRuRu,
          UniverDesignRuRu,
      )
    }
  });
  univerRef.value = univer;

  // core plugins
  univer.registerPlugin(UniverRenderEnginePlugin);
  univer.registerPlugin(UniverFormulaEnginePlugin);
  univer.registerPlugin(UniverUIPlugin, {
    container: container,
    header: true,
    toolbar: true,
    footer: true,
  });

  // doc plugins
  univer.registerPlugin(UniverDocsPlugin);
  univer.registerPlugin(UniverDocsUIPlugin);

  // sheet plugins
  univer.registerPlugin(UniverSheetsPlugin);
  univer.registerPlugin(UniverSheetsUIPlugin);
  univer.registerPlugin(UniverSheetsFormulaPlugin);

  if (container === container1.value) {
    workbook1.value = data;
  } else if (container === container2.value) {
    workbook2.value = data;
  } else if (container === container3.value) {
    workbook3.value = data;
  } else if (container === container4.value) {
    workbook4.value = data;
  } else if (container === container5.value) {
    workbook5.value = data;
  } else if (container === container6.value) {
    workbook6.value = data;
  }

  // create workbook instance
  univer.createUnit(UniverInstanceType.UNIVER_SHEET, data);
};

const destroyUniver = () => {
  univerRef.value?.dispose();
  univerRef.value = null;
  workbook1.value = null;
  workbook2.value = null;
  workbook3.value = null;
  workbook4.value = null;
  workbook5.value = null;
  workbook6.value = null;
};
</script>

<style scoped>
.header, .footer {
  text-align: center;
  font-size: 1.2em;
  color: #000080; /* Темно-синий цвет текста */
  background-color: #ADD8E6; /* Светло-голубой цвет фона */
  padding: 10px 0;
  width: 100%;
}

.container-row {
  display: flex; /* Располагаем контейнеры горизонтально */
  width: 100%;
}

.univer-container {
  width: 50%;
  height: 50vh; /* Уменьшаем высоту контейнеров вдвое */
  overflow: hidden;
  background-color: #FFFFFF; /* Белый цвет фона контейнеров */
  border: 1px solid #000080; /* Темно-синий цвет границ контейнеров */
}

.examples-page {
  display: flex;
  flex-direction: column; /* Располагаем элементы вертикально */
  align-items: center; /* Центрируем элементы по горизонтали */
}
</style>