Как подключить функциональные компоненты внутри функционального компонента?

Question

[Владимир Голубь]

Есть такой код

Основной компонент:

<template functional>
    <div class="tariff-item">
        <div class="tariff-item__top">
            <h3 class="tariff-item__title"></h3>
            <ul class="tariff-item__list">
                <li
                    class="tariff-item__item"
                    v-for="item in items"
                >
                </li>
            </ul>
        </div>
        <div class="tariff-item__bottom">
            <p class="tariff-item__price">{{ price }}</p>
            <p class="tariff-item__time">{{ time }}</p>
            <Button
                :title="Кнопка"
            />
        </div>
    </div>
</template>

<script>
    import Button from '../elements/Button';

    export default {
        functional: true,
        name: "TariffItem",
        components: {
            Button
        }
    }
</script>

Компонент кнопки:

<template functional>
    <button
        class="button"
        @click="clickFunc"
    >
            { title }
    </button>
</template>

<script>
    export default {
        functional: true,
        name: "Button",
        props: {
            'title': {
                type: String,
                default: ''
            },
            'clickFunc': {
                type: Function,
                default: () => {}
            }
        },
    }
</script>

Как правильно соединить их между собой ?

Answer 1

[its2easyy]

По умолчанию не работают, но есть костыли https://github.com/vuejs/vue/issues/7492