Is there a limit on how many divs a vue component has to have so it can be displayed as a microfrontend?

I made this webpack module federation microfrontend project that consists a vue project that contains a vue component that should be displayed in another vue project.

So I have a vue component like this and it doesn’t get displayed:

    <div class="column is-6 is-offset-3">
      <div class="box">
        <div class="block">
          <h1 class="title">Title</h1>
        </div>
        <div class="columns">
          <div class="column has-text-grey">by x</div>
          <div class="column has-text-grey">12/12/32 12:34</div>
        </div>
        <div class="block">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa
          voluptatem harum praesentium quas voluptatibus nostrum debitis totam
          tempore, et dolor unde incidunt hic recusandae ipsa facilis quaerat
          quod sequi nulla?
        </div>
        <div class="block">
          <div class="tags">
            <span class="tag">tag </span>
            <span class="tag">tag </span>
            <span class="tag">tag </span>
            <span class="tag">tag </span>
          </div>
        </div>
      </div>
    </div>
  </div>

I have noticed that if I remove some divs it does eventually get displayed, like this:

<template>
  <div class="columns">
    <div class="column is-6 is-offset-3">
      <div class="box">
        <div class="block">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa
          voluptatem harum praesentium quas voluptatibus nostrum debitis totam
          tempore, et dolor unde incidunt hic recusandae ipsa facilis quaerat
          quod sequi nulla?
        </div>
      </div>
    </div>
  </div>
</template>

Is there a limit?, how can I change it?

this are the webpack configs:
for the project that provides data:

const path = require("path");
const { VueLoaderPlugin } = require("vue-loader");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { ModuleFederationPlugin } = require("webpack").container;
module.exports = (env = {}) => ({
  mode: "development",
  cache: false,
  devtool: "source-map",
  optimization: {
    minimize: false,
  },
  target: "web",
  entry: path.resolve(__dirname, "./src/main.js"),
  // output: {
  //   path: path.resolve(__dirname, './dist'),
  //   publicPath: '/dist/'
  // },
  output: {
    publicPath: "auto",
  },
  resolve: {
    extensions: [".vue", ".jsx", ".js", ".json"],
    alias: {
      // this isn't technically needed, since the default `vue` entry for bundlers
      // is a simple `export * from '@vue/runtime-dom`. However having this
      // extra re-export somehow causes webpack to always invalidate the module
      // on the first HMR update and causes the page to reload.
      vue: "@vue/runtime-dom",
    },
  },
  module: {
    rules: [
      {
        test: /.vue$/,
        use: "vue-loader",
      },
      {
        test: /.png$/,
        use: {
          loader: "url-loader",
          options: { limit: 8192 },
        },
      },
      {
        test: /.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {},
          },
          "css-loader",
        ],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].css",
    }),
    new ModuleFederationPlugin({
      name: "home",
      filename: "remoteEntry.js",
      remotes: {
        home: "home@http://localhost:8002/remoteEntry.js",
      },
      exposes: {
        "./Content": "./src/components/Content",
        "./Button": "./src/components/Button",
        "./Post": "./src/components/Post",
        "./Test": "./src/components/Test"
      },
    }),
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "./index.html"),
    }),
    new VueLoaderPlugin(),
  ],
  devServer: {
    static: {
      directory: path.join(__dirname),
    },
    compress: true,
    port: 8002,
    hot: true,
    headers: {
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
      "Access-Control-Allow-Headers":
        "X-Requested-With, content-type, Authorization",
    },
  },
});

For the project that reads data:

const path = require("path");
const { VueLoaderPlugin } = require("vue-loader");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { ModuleFederationPlugin } = require("webpack").container;
module.exports = (env = {}) => ({
  mode: "development",
  cache: false,
  devtool: "source-map",
  optimization: {
    minimize: false,
  },
  target: "web",
  entry: path.resolve(__dirname, "./src/main.js"),
  output: {
    publicPath: "auto",
  },
  resolve: {
    extensions: [".vue", ".jsx", ".js", ".json"],
    alias: {
      // this isn't technically needed, since the default `vue` entry for bundlers
      // is a simple `export * from '@vue/runtime-dom`. However having this
      // extra re-export somehow causes webpack to always invalidate the module
      // on the first HMR update and causes the page to reload.
      vue: "@vue/runtime-dom",
    },
  },
  module: {
    rules: [
      {
        test: /.vue$/,
        use: "vue-loader",
      },
      {
        test: /.png$/,
        use: {
          loader: "url-loader",
          options: { limit: 8192 },
        },
      },
      {
        test: /.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {},
          },
          "css-loader",
        ],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].css",
    }),
    new ModuleFederationPlugin({
      name: "layout",
      filename: "remoteEntry.js",
      remotes: {
        home: "home@http://localhost:8002/remoteEntry.js",
      },
      exposes: {},
    }),
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "./index.html"),
      chunks: ["main"],
    }),
    new VueLoaderPlugin(),
  ],
  devServer: {
    static: {
      directory: path.join(__dirname),
    },
    compress: true,
    port: 8001,
    hot: true,
    headers: {
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
      "Access-Control-Allow-Headers":
        "X-Requested-With, content-type, Authorization",
    },
  },
});