Creating tabs from blade view

<x-filament::tabs x-data="{ activeTab: 'tab1' }" vertical>
    <x-filament::tabs.item
        alpine-active="activeTab === 'tab1'"
        x-on:click="activeTab = 'tab1'"
    >
        Tab 1
    </x-filament::tabs.item>

    <x-filament::tabs.item
        alpine-active="activeTab === 'tab2'"
        x-on:click="activeTab = 'tab2'"
    >
        Tab 12121
    </x-filament::tabs.item>

    <x-filament::tabs.item
        alpine-active="activeTab === 'tab3'"
        x-on:click="activeTab = 'tab3'"
    >
        Tab 3
    </x-filament::tabs.item>
</x-filament::tabs>

 <div class="rounded-xl bg-white shadow-sm ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10" x-data="{ tab: 'tab1' }">
    <x-filament::tabs label="Content tabs" contained="true">
        <x-filament::tabs.item @click="tab = 'tab1'" :alpine-active="'tab === \'tab1\''">
            Details
        </x-filament::tabs.item>

        <x-filament::tabs.item @click="tab = 'tab2'" :alpine-active="'tab === \'tab2\''">
            Cast
        </x-filament::tabs.item>

        <x-filament::tabs.item @click="tab = 'tab3'" :alpine-active="'tab === \'tab3\''">
            Summary
        </x-filament::tabs.item>
    </x-filament::tabs>

    <div class="fi-fo-tabs-tab p-6">
        <div x-show="tab === 'tab1'">
            @include(...)
        </div>

        <div x-data x-init="@this.call('loadCastData')" x-show="tab === 'tab2'">
            @include(...)
        </div>

        <div x-data x-show="tab === 'tab3'">
            @include(...)
        </div>
    </div>
</div>