Как вставить тег шаблона в другой шаблон Vue.js

Question

Я пытаюсь создать компонент, имеющий слот с атрибутом имени и другой компонент с такой же структурой. Итак, я хочу поместить второй компонент внутри первого, но в другой внешний компонент.

Пример:

App.vue

<template>
    <ComponentA>
        <ComponentB>Hello World!</ComponentB>
    </ComponentA>
</template>

ComponentA.vue

<template>
    <div id="A">
        <slot name="a1"></slot>
        <slot name="a2"></slot>
    </div>
</template>

ComponentB.vue

<template slot="a2">
    <div id="B">
        <slot></slot>
    </div>
</template>

UPDATE!

codesandbox

Если я напишу

<slot></slot>

вместо

 <slot name='a2'></slot>

в ComponentA это будет работать. Но мне нужно использовать последнюю форму, потому что я должен контролировать порядок.