Vue.js child component to populate the slots of a dynamic component inside parent component

Question

How can I render the header slot to the table component from the child component? This code is not working:

Table component

<template>
   <div>
      <slot name="header"></slot>
   </div>
</template>

Parent component

 <template>
   <div>
      <component :is="currentComponent" > </component> 
   </div>
 </template>
 <script>
 export default {
 data() {
   return {
      currentComponent: 'Table'
      };
   },
 };
 </script>

Child component

    <template>
       <div>
         <parent-component> 
           <template slot="header">
              <h1>test</h1>
           </template>
         </parent-component>
     </div>
   </template>

Tried the code above but it dosent work Expecting to render title from child component

Solution:

Table component

<template>
   <div>
      <slot name="header"></slot>
   </div>
</template>

Parent component

 **<template>
   <div>
      <component :is="currentComponent" >
         <template v-for="(_, name) in $slots" #[name]="slotData">
              <slot :name="name" v-bind="slotData || {}" />
         </template>
      </component> 
   </div>
 </template>**
 <script>
 export default {
 data() {
   return {
      currentComponent: 'Table'
      };
   },
 };
 </script>

Child component

    <template>
       <div>
         <parent-component> 
           <template slot="header">
              <h1>test</h1>
           </template>
         </parent-component>
     </div>
   </template>