Guidance on custom tab blade views

<div x-data="{ tab: 'tab1', tabLoaded: { tab1: false, tab2: false } }">
    <x-filament::tabs>
        <x-filament::tabs.item :active="$activeTab === 'tab1'" wire:click="$set('activeTab', 'tab1')">
            My Schedule
        </x-filament::tabs.item>
        <x-filament::tabs.item :active="$activeTab === 'tab2'" wire:click="$set('activeTab', 'tab2')">
            Team Schedule
        </x-filament::tabs.item>

        {{-- Other tabs --}}
    </x-filament::tabs>

    <div class="mt-2">
        <!-- Tab 1 -->
        <div x-ref="tab1" x-show="tab === 'tab1'">
            @livewire(\App\Filament\Widgets\WorkWeekScheduleWidget::class)
        </div>

        <!-- Tab 2 -->
        <div x-ref="tab2" x-show="tab === 'tab2'">
            @livewire(\App\Filament\Widgets\WorkWeekScheduleWidgetTeam::class)
        </div>
    </div>
</div>