i have 2 livewire component on difference route :

route : ../find/add

class Preview extends Component
{

    public $rabId;

    public function render()
    {
        $rab = Rab::find($this->rabId);

        return view('livewire.rab.preview', [
            'rab' => $rab,
        ]);
    }


    public function sendFinanceData(int $rabId)
    {
    
        $rab = Rab::find($rabId);

        ModelRabStatus::updateOrCreate([
            'rab_id' => $rabId,
        ], [
            'status' => RabStatus::Pending,
        ]);

        $this->emit('sendRabToFinance');
    }

}

and route : ../fin/list

class Index extends Component
{
    protected $listeners = [
        'sendRabToFinance' => '$refresh',
    ];

    public function render()
    {

        $pending = ModelRabStatus::whereStatus(RabStatus::Pending)->orderBy('created_at', 'asc')->paginate(10);

        $approved = ModelRabStatus::whereStatus(RabStatus::Approved)->orderBy('updated_at', 'desc')->paginate(10);

        return view('livewire.finance.f-rab.index', [
            'pending' => $pending,
            'approved' => $approved,
        ]);
}

}

i want to refresh Index component when i click wire:click="sendFinanceData{{$id}}" but it doesn't work using magic $refresh. Any reference how to refresh the component on a different route or page?