Написание универсальной оболочки для вкладок buefy в VueJS

Question

Невозможно динамически внедрить экземпляр вложенных компонентов (содержимого b-tab-item) в родительский объект (b-tabs). Столкнулся с этой проблемой при попытке создать оболочку (пользовательский компонент), которая моделирует buefy tabs / tabItems.

Невозможно динамически перемещать содержимое правой вкладки внутри <b-tab-item>.

Использование (Wrapper):

<tabs>
    <tab label="Tab A">
        <label>First Name</label><input type="text" name="fName" />
    </tab>
    <tab label="Tab B">
        <label>Last Name</label><input type="text" name="lName" />
    </tab>
 </tabs>

Ожидаемый результат:

<b-tabs>
    <b-tab-item label="Tab A">
      <label>First Name</label>
      <input type="text" name="fName" />
    </b-tab-item>
    <b-tab-item label="Tab B">
      <label>Last Name</label>
      <input type="text" name="lName" />
    </b-tab-item>
  </b-tabs>

Все, что я пробовал до сих пор, находится в ссылке Jsfiddle ниже: https://jsfiddle.net/nataraj_gnanavadivel/7bfxx9we/6/