I’m trying to get the categories and it’s categories as nested items. Following code works, but the problem is when I input minimum price or maximum price value, only parent categories comes up when content changed on the page.

How can I solve this unexpected behavior?

sidebar.blade.php

<div class="bg-white p-6 border border-border-white rounded-md hidden md:flex md:flex-col md:gap-6 md:max-w-[270px] h-fit">
    <div>
       <p class="capitalize font-semibold">type</p>
       <ul class="mt-3 flex flex-col gap-1">
           <li class="flex items-center gap-2">
               <input type="radio" id="any" wire:model="type" class="accent-purple w-4 h-4" value="any" wire:click="type">
               <label for="any" class="capitalize">any</label>
           </li>
           <li class="flex items-center gap-2">
               <input type="radio" id="auction" wire:model="type" class="accent-purple w-4 h-4" value="auction" wire:click="type">
               <label for="auction" class="capitalize">Auction</label>
           </li>
           <li class="flex items-center gap-2">
               <input type="radio" id="classified" wire:model="type" class="accent-purple w-4 h-4" value="classified" wire:click="type">
               <label for="classified" class="capitalize">classified</label>
           </li>
           selected {{$type}}
       </ul>
   </div> 
    <div>
enter code here
       <p class="capitalize font-semibold">category</p>
       <ul class="mt-3 flex flex-col gap-1">
           <li class="flex items-center gap-2">
               <input type="radio" id="any" wire:model="category" class="accent-purple w-4 h-4" wire:click="category" value="0">
               <label for="any" class="capitalize">any</label>
           </li>
           @foreach ($categories as $category)
               <li class="flex items-center gap-2">
                    <input type="radio" id="classified" wire:model="category" class="accent-purple w-4 h-4" wire:click="category" value="{{ $category->id}}">
                    <label for="classified" class="capitalize">{{ __($category->name) }}</label>
                </li>
                @if(!is_null($category->subcategories))
                <ul class="mt-1 ml-5 flex flex-col gap-1">
                    @foreach ($category->subcategories as $subcategory)
                        <li class="flex items-center gap-2">
                            <input type="radio" id="apperal" wire:model="category" class="accent-purple w-4 h-4" wire:click="category" value="{{ $subcategory->id}}">
                            <label for="apperal" class="capitalize">{{ __($subcategory->name) }}</label> 
                        </li>
                    @endforeach
                </ul>
                @endif
           @endforeach
       </ul>
   </div>
   <div>
       <p class="capitalize font-semibold">price</p>
       <input type="number" wire:model="min_price" wire:model.live="min_price" id="min_price" placeholder="Min Price" class="mt-3 w-full border border-border-white rounded-md p-4 focus:outline-none focus:border-purple">
       @error('min_price')
            <p class="text-sm mt-1 text-red-500">{{ $message}}</p>
       @enderror
       <input type="number" wire:model="max_price" wire:model.live="max_price" id="max_price" placeholder="Max Price" class="mt-1 w-full border border-border-white rounded-md p-4 focus:outline-none focus:border-purple">
   </div>
</div>

Sidebar.php

    <?php

namespace AppLivewireListings;

use LivewireComponent;
use AppModelsCategory;
use LivewireAttributesUrl;
use LivewireAttributesValidate;

class Sidebar extends Component
{
    #[Url]
    public $type = 'any';

    #[Url]
    public $category = 'any';

    #[Url, Validate]
    public $min_price = '';

    #[Url]
    public $max_price = '';

    public $categories;

    public function mount()
    {
        $this->categories = $this->getNestedCategories();
        
    }

    private function getNestedCategories($parentId = null)
    {
        $categories = Category::where('parent_id', $parentId)->get();
        
        foreach ($categories as $category) {
            $category->subcategories = $this->getNestedCategories($category->id);
        }
        
        return $categories; 
    }

    public function rules()
    {
        return [
            'min_price' => 'numeric|between:1,999999999',
            'max_price' => 'numeric|between:1,999999999',
        ];
    }

    public function render()
    {
        return view('livewire.listings.sidebar', [
            'categories' => $this->categories,
        ]);
    }
}

Category.php

 <?php

namespace AppModels;

use AppStatus;
use IlluminateDatabaseEloquentFactoriesHasFactory;
use IlluminateDatabaseEloquentModel;
use IlluminateDatabaseEloquentRelationsBelongsTo;
use IlluminateDatabaseEloquentRelationsHasMany;

class Category extends Model
{
    use HasFactory;

    public function Listings(): HasMany
    {
        return $this->hasMany(Listing::class, 'category_id');
    }

    public function child(): HasMany
    {
        return $this->hasMany(Category::class, 'parent_id');
    }

    public function parent(): BelongsTo
    {
        return $this->belongsTo(Category::class, 'parent_id');
    }

    protected $casts = [
        'is_active' => Status::class,
    ];
}