Hierarchical dynamic loaded components with children distributed along dynamic named slots

Question

We're creating an app where the interface is dynamically mounted based on a JSON returned by an API. It looks like this:

{
  "path": "Container",
  "children": [
    {
      "slot": "default",
      "path": "Banner",
      "props": {
        "items": [ "image1.jpg", "image2.jpg", "image3.jpg" ]
      }
    },

    {
      "slot": "header",
      "path": "Flex",
      "props": {
        "flow": "row"
      },
      "children": [
        {
          "slot": "default",
          "path": "Icon",
          "props": {
            "name": "mdi-forum"
          }
        },

        {
          "slot": "default",
          "text": "Example of title"
        }
      ]
    }
  ]
}

So I created a dynamic ComponentLoader with a computed doing a dynamic import, then I also inject more dynamic component loaders recursively as needed, using a v-for through the children list:

<template>
  <component v-if="component" :is="component" v-bind="$attrs">
    <template v-for="(child, i) of children">
      <ComponentLoader
        v-if="child.path"
        v-bind="child.props"
        :key="`${child.path}-${i}`"
        :path="child.path"
        :children="child.children"
      />
      <template v-else>{{ child.text || '' }}</template>
    </template>
  </component>
</template>

<script>
import Error from '~/components/ComponentLoaderError.vue'

export default {
  name: 'ComponentLoader',
  components: { Error },
  props: {
    path: { type: String, required: true },
    children: { type: Array, default: () => [] },
  },
  computed: {
    component() {
      if (!this.path) return null
      return () => import(`~/components/${this.path}`).then((m) => m || m.default).catch(() => Error)
    },
  },
}
</script>

It's almost working, but all children gone injected to the default slot of each loaded component, which makes all sense since I'm not informing the desired slot during the loop through the children.

Inspired in this answer, I added a v-slot bind on the <template> with the v-for, using Dynamic Slot Names to inject on the right slot based in the child.slot property already received from the JSON:

<template v-for="(child, i) of children" #[child.slot]>

For nodes with only one child to be distributed on each slot, it's working as expected. But when I have more children to be distributed in the same slot (like the last children array in that JSON), only the last child is injected, overriding others before.

So, how to inject many children to dynamic named slots inside a loop?