I have a reusable set of components that I use throughout the entire app. The problem is events like template(v-slot:item="{ props, item }") are not being rendered when passed as a slot from parent here is my code

AppSelectfield.vue

<v-select class="apptextfield" hide-details="auto" v-bind="$attrs" variant="outlined">
    <slot></slot>
</v-select>

SomeComponent.vue

    import AppSelectField from '@/components/MaterialDesign/AppSelectField.vue';
    
    <app-select-field v-model="selectedPlatformLanguage" :rules="[required]" item-title="text" item-value="value" :outerLabelText="$t('settings.options.platformLang.selectLang')" :items="i18nLanguages">
        <template v-slot:item="{ props, item }"> //doesnot work
            <h1>hi</h1>
        </template>
    </app-select-field>

the above invocation of slot item doesnot work when called from parent. What I am trying to achieve here is since there are dozens of api’s which v-select provides the parent should be able to have control over what the UI is gonna look like and which events to trigger at any particular point in time.

It does work when I use template(v-slot:item="{ props, item }") inside AppSelectField.vue but that doesn’t fullfil the purpose

Here is the playground link if you want to see it in action