I’m working on integrating Vue.js with Laravel to create a multilingual content management system, and I’m facing an issue with dynamic slots not rendering any content. Despite setting up everything according to the Vue.js documentation, the slots appear in the DOM but are empty.

Blade Template:

<div id="editor-with-language-tabs">
        @foreach($languages as $language)
            <template v-slot:{{ "tab-content-{$language->code}" }}>
                <div id="language-tab-{{ $language->code }}">
                    test
                </div>
            </template>
        @endforeach
    </div>

EditorWithLanguageTabs:

<template>
    <div class="dashboard__content__main__wrapper tabWrapper disFlex fdCol row nw">
        <div class="dashboard__content__main__intro pagebuilder__heading disFlex jcSB aiCenter pt40 pr40 pl40">
            <h2 class="mb0">Beheer navigatie</h2>
            <div class="dashboard__content__main__intro__buttons disFlex">
                <a href="" class="btn sec ghost small"><i class="far fa-floppy-disk-circle-xmark mr5"></i> Opslaan & sluiten</a>
                <button type="submit" form="pagebuilder-form" class="btn sec small"><i class="far fa-floppy-disk mr5"></i> Opslaan</button>
            </div>
        </div>
        <language-selector :languages="languages"></language-selector>
        <language-tabs :languages="languages">
            <template v-for="language in languages" v-slot:[`tab-content-${language.code}`]>
                <slot :name="`tab-content-${language.code}`"></slot>
            </template>
        </language-tabs>
    </div>
</template>


<script>
import { ref, onMounted } from 'vue';
import { useLanguageStore } from '../store/main';
import LanguageSelector from "./LanguageSelector.vue";
import LanguageTabs from "./LanguageTabs.vue";

export default {
    components: {LanguageTabs, LanguageSelector},
    setup() {
        const store = useLanguageStore();
        const languages = ref([]);

        onMounted(async () => {
            await store.getLanguages();
            languages.value = store.languages;
        });

        return {languages};
    }
}
</script>

LanguageTabs

<template>
    <div class="pagebuilder__content__wrapper">
        <div v-for="language in languages" :key="language.id" :id="`language-tab-${language.code}`" class="tab-content">
            <slot :name="`tab-content-${language.code}`"></slot>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        languages: Array
    }
}
</script>

The rendered DOM:

<div class="pagebuilder__content__wrapper">
<div id="language-tab-nl" class="tab-content"></div>
<div id="language-tab-en" class="tab-content"></div>
</div>

The expected behavior is for each div with ID language-tab-xx to contain the text “test”, but the slots are empty. I have checked that the components are registered and mounted correctly, and there are no errors in the JavaScript console.

Could anyone help me understand why the content inside the slots isn’t rendering and suggest any possible solutions?