Here is a simplified structure of my components.

statistics (full page component)
---> table-controls
-------> form
-----------> owner-selector
---------------> select
-----------> tournament-selector
---------------> select
--> table

I have 6 selectors and their options depend on the previous selections. When I select “owner”, the list of tournaments that belongs to the selected owner should be rendered in tournament-selector. After making all selection, I’m going to submit the form to fetch data.

Here is the issue: I’m using wire:model.live in “select” and dipatch event to listen “selector” components. But Livewire rerenders whole page component as soon as I select owner. I need to prevent this behaviour, and rerender only tournament-selector. Rerendering whole page or table should be perform only after submitting the form.

class Statistics extends Component
{
    public function render()
    {
        return view("stats::{$this->type}-stats", ['stats' => (new ReadStats)->handle()]);
    }
}

// statistics.blade.php

<div>
    @livewire('table-control')

    @livewire('table-data')
</div>

// table-control.blade.php

<form>
    @livewire('owner-selector')
    @livewire('tournament-selector')

    <button type="submit">Save</button>
</form>

class Select extends Component
{
    public $name;
    public $options;
    public $selection;

    public function updated(): void
    {
        $this->dispatch("{$this->name}-selected", id: $this->selection);
    }

    public function render()
    {
        return view('livewire.select');
    }
}

<select 
    id="{{ $name }}-selector"
    name="{{ $name }}"
    wire:model.live="selection"
>
    @foreach ($options as $option)
        <option value="{{ $option->id }}">{{ $option->name }}</option>
    @endforeach
</select>

class OwnerSelector extends Component
{
    public function render()
    {
        return view('definitions::components.level-selector', [
            'name' => 'owner',
            'options' => Owner::get(['id', 'name']),
        ]);
    }
}

class TournamentSelector extends Component
{
    public $parentID;

    #[On('owner-selected')]
    public function setParent($id)
    {
        $this->parentID = $id;
    }

    public function render()
    {
        return view('definitions::components.level-selector', [
            'name' => 'tournament',
            'options' => $this->parentID ?? false ? $this->getTournaments() : []
        ]);
    }

    private function getTournaments()
    {
         return Tournament::whereHas('owner',fn ($q) => $q->where('id', $this->parentID)->get(['id', 'name']));
    }
}

// level-selector
<div>
    <livewire:select name="{{ $name }}" :options="{{ $options }}" />
</div>

How can I prevent full page rerendering when I make a selection?

Thanks in advance.