initialData is null in livewire component when there is a two events in the same component

Question

I am having two events in my component one is changing the layout and another one is sorting. Changing a layout basically it only replace a layout component inside a parent component. Now when i am calling a sorting then livewire giving me a error 'initialdata is null '.

I am looking for to create a sorting order with this same component. And my code is

<div class="dropdown px-2 d-none d-lg-block">
  <div class=" text-dark fw-bold  dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="px-1">
      <img class="" src="{{ Vite::image('icons/classic.png') }}" alt="" />
    </span>
    <span>
      <img class="" src="{{ Vite::image('icons/filter-down.png') }}" alt="" />
    </span>
  </div>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <a class="dropdown-item text-primary @if($show == 1)text-primary @else text-dark @endif fw-bolder" href="javascript:void(0)" wire:click="$set('show', '1')">
      <img src="{{ Vite::image('icons/compact.png') }}" alt="" class="ps-2" /> Card </a>
    <a class="dropdown-item uni-border  @if($show == 2)text-primary @else text-dark @endif fw-bolder " href="javascript:void(0)" wire:click="$set('show', '2')">
      <img src="{{ Vite::image('icons/classic.png') }}" alt`your text`="" class="ps-2" />Classic </a>
    <a class="dropdown-item  uni-border @if($show == 3) text-primary @else text-dark @endif fw-bolder" href="javascript:void(0)" wire:click="$set('show', '3')">
      <img src="{{ Vite::image('icons/com.png') }}" alt="" class="ps-2" />Compact </a>
  </div>
</div>
{{-- sorting option --}}
<div class="d-flex justify-content-between pt-2 align-items-center d-none d-lg-block ">
  <div class="d-flex align-items-center justify-content-between">
    <div>
      <span class="m-0">Selected Filters:</span>
      <span class="  mx-3 boat-span2 align-items-center rounded-1">
        <span>$500 </span>
        <span>
          <img src="{{ Vite::image('icons/cross.png') }}" alt="" class="" />
        </span>
      </span>
      <span class="   boat-span2 align-items-center rounded-1">
        <span> Skipper </span>
        <span>
          <img src="{{ Vite::image('icons/cross.png') }}" alt="" class="" />
        </span>
      </span>
    </div>
    <div class="">
      <h6 class="m-0 text-secondary fw-500 ">
        <u> Clear Filters</u>
      </h6>
    </div>
  </div>
</div>
 @if($show == 2)
                {{-- classic layout --}}
                @livewire('frontend.boat.listing.layout.classic',['product' => $product])
                @elseif($show == 1)
                {{-- card layout --}}
                @livewire('frontend.boat.listing.layout.card',['product' => $product])
                @elseif($show == 3)
                {{-- compact layout --}}
                @livewire('frontend.boat.listing.layout.compact',['product' => $product])
                @endif
</div>

<?php

namespace App\Http\Livewire\Frontend\Boat\Listing;

use App\Models\Product;
use Livewire\Component;

class Listing extends Component
{

    // Mount , boot , hydrate component

    public $filter_option_recommend = "recommended";
    public $show = "2";
    // public $filter_option = "name";

    // public $product;

    public function detail($id, $title)
    {
        return redirect()->route('website.boat.detail', [$id, $title]);
    }

    public function render()
    {
        $product = Product::join('product_time_assign', 'product_time_assign.product_id', '=', 'products.id')
            ->where([
                'products.type_id' => 1, // boat
                'products.status' => 'Active',
            ])
            ->select(
                'products.id as productid',
                'product_time_assign.id as timeassignid',
                'products.name',
                'products.capacity',
                'products.price_starts',
                'product_time_assign.skipper',
                'product_time_assign.product_time_assign_id',
                'products.review_rating',
                'products.image',
                'products.description',
                'products.discount_price'
            )
            ->orderBy($this->filter_option_recommend, 'asc')->get();
        return view('livewire.frontend.boat.listing.listing', ['product' => $product]);
    }
}