JSFiddle - React, Tailwind, and code Playground

HTML

<div id="vue">
  <child>
    <template slot="a1">111</template>
    <template slot="a2">World</template>
  </child>
</div>

JavaScript

Vue.component('child', {
	template:`
    <grandchild>
    	<template slot="b1"><slot name="a1"></slot></template>
    	<template slot="b2"><slot name="a2"></slot></template>
    </grandchild>`
})
Vue.component('grandchild', {
	template:`
  	<ggrandchild>
    	<template slot="c1"><slot name="b1"></slot></template>
    	<template slot="c2"><slot name="b2"></slot></template>
    </ggrandchild>`
})
Vue.component('ggrandchild', {
	template:`
  	<div>
    	<slot name="c1"></slot>
      <slot name="c2"></slot>
    </div>`
})
new Vue({
	el:'#vue'
})