How to wire functional components inside a functional component?

Question

Vue.js

Here is the code for the
Main Component:

<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>

Button Component:

<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>

How to properly connect them together?

Answer 1

They don't work by default, but there are crutches https://github.com/vuejs/vue/issues/7492