Как я могу использовать динамические компоненты внутри функциональных компонентов Vue.js с шаблонами?

Question

Начиная с Vue.js 2.5, можно использовать функциональные компоненты с шаблонами. Как я могу использовать динамические компоненты в шаблонах в функциональных компонентах?

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

Вы можете воспроизвести проблему по этой ссылке.

Изменить: Кажется, что это может быть ошибка.

<template functional>
  <div class="translation controlClass">
    <translation-accordion :control-small="false"
                           :translation="translation"
                           :line-id="lineId">
      <div class="content" :style="{ fontSize: props.textSize + 'rem'}">
        <slot></slot>
      </div>
    </translation-accordion>
  </div>
</template>

<script>

import TranslationAccordion from "./TranslationAccordion.vue"

export default {
    name: 'TextLine',
    components: {
        TranslationAccordion
    },
    props: ['lineId', 'audio', 'translation', 'textSize']
}
</script>

<style lang="scss">

$break-small: 500px;

.controlClass:hover .control {
    display: block;
}

.control {

    display: block;

    @media screen and (min-width: $break-small) {
        display: none;
    }
}

</style>