I have a wrapper component(Wrapper.vue).

<component v-for="c of comps" :key="c.componentName" :is="c.componentName">
      <slot :name="c.componentName">
      </slot>
</component>

const comps = 
      [
        {
          componentName: "Child1",
        },
        {
          componentName: "Child2",
        }
      ];

Child1.vue is something like below

<template>
  <div class="hello">
    <slot name="top">Child1 slot top text</slot>
  </div>
</template>

Child2.vue is something like below

<template>
  <div class="hello">
    <slot name="top">Child2 slot top text</slot>
  </div>
</template>

I want to use the wrapper like below in App.vue

<Wrapper>
      <template slot="slot1">
        <template slot="top">Inner Content1</template>
      </template>
      <template slot="slot2">
        <template slot="top">Inner Content2</template>
      </template>
</Wrapper>

CodeSandbox Link:- https://codesandbox.io/s/mystifying-burnell-ir8un

It is showing default text from Child1 and Child2 not from App.vue What should be done to fix it?