Слот с несколькими динамическими именами

Question

У меня есть Vue(2.6.x) составная часть tabs, у него есть element реквизит, который принимает array объекта, эти объекты имеют slot имя, поэтому я хочу перебрать array и получить слот для каждого элемента, и передать его в родительском, как это

Родительский компонент

<tabs-component :elements="elements">
    <template #tab1>
        <!-- Here goes html -->
        My first tab content
    </template>
    <template #tab2>
        <!-- Here goes html -->
        My first tab content
    </template>
    <template #tab3>
        <!-- Here goes html -->
        My first tab content
    </template>
</tabs-component>
<script>
    export default {
        data() {
            return {
                elements: [{
                    id:1, 
                    slot:'tab1'
                },{
                    id:2,
                    slot:'tab2'
                },{
                    id:3,
                    slot:'tab3'
                }]
            }
        }
    }
</script>

Тогда в component я хочу сделать это.

<template>
    <div>
        <div  v-for="element in elements" :key="element.id">
            <slot:name="element.slot">
            </slot>
        </div>
    </div>
</template>
<script>
    export default {
        props: {
            elements: {
                type: Array,
                required: true
            }
        }
    }
</script>

Но это не отображает содержимое слота вкладок, который я передаю, консоль и терминал не показывают никаких ошибок.

Как этого достичь?