how to “destroy” and re-render the div that has foreach data in laravel livewire?

so, I have a livewire which the data come from json.gz. so it’s not from model laravel. In this livewire, I need to make custom pagination, custom data form and so on.

So, I have this select option “thing” that can show the data from 1-10 or 1-50 (I have no idea what this is called). the markup is like this :

<div>
    <select wire:change="changeCountRows($event.target.value)" class="form-select form-select-sm form-select-solid w-100px">
        <option value="10">10</option>
        <option value="50">50</option>
        <option value="100">100</option>
    </select>
</div>

the default value is 10. so the data will show 10/page.

now, the problem is that, when I tried to change from 10 to 50/page, it works fine.
but, when try to “descreased” it, for example form 50 to 10/page, the div ‘data view’ it still show 50. however, the data/rows from 1-10 is changed (so it works when I change the select option thing to 10).

so my problem is that, how to remove this 11-50 rows (remaining data)?

I’ve tried and follow these article :

• Article 1
• Article 1
• and a couple youtube video
• which basically show me to “refresh” component view using $refresh. but still no luck

here’s my couple function

• render() :

public function render()
{
    if($this->items_json == null || $this->prev_search !== $this->search) {
        $this->getDatasJson();
        $this->prev_search = $this->search;
    }
    $this->arrayChunkJson($this->items_json, $this->filterEntries);

    if($this->page_custom >= $this->end_page){
        $this->end_page = $this->page_custom+1;
        $this->start_page = $this->page_custom - 4;
    }elseif ($this->page_custom < $this->start_page) {
        $this->start_page = $this->page_custom;
        $this->end_page = $this->page_custom + 5;
    }
    $datas = $this->single_cat[$this->page_custom];
    $this->last_total_cat = array_keys($datas)[0] + 1;
    $this->total_cat_show = $this->last_total_cat + ($this->filterEntries - 1);

    // dd($this->single_cat);
    return view('livewire.kategori.single-kategori-mobile', [
        'single_cats' => $this->single_cat[$this->page_custom],
        'page' => $this->page_custom,
        'total_page' => $this->total_page,
        'start_page' => $this->start_page,
        'end_page' => $this->end_page,
        'total_cat' => $this->total_cat,
        'last_total_cat' => $this->last_total_cat,
        'total_cat_show' => $this->total_cat_show
    ]);
}

• changeCountRows() :

public function changeCountRows($filterEntries){
    $this->filterEntries = $filterEntries;
    $this->emit('refresh_me');
}

• listener on top of file :

protected $listeners = ['refresh_me' => '$refresh'];

• and this is how I fetched it in view :

<div class="flex flex-col" wire:loading.class="loading">
    {{-- @dd(count($single_cats)); --}}
    @foreach($single_cats as $val)
        my data
    @endforeach
</div>

Once again, my only problem is that, how to “remove” the remaining data from view. It’s like the view still “read” the “data chunk”. even tough, in render function, I’been “re-chunk” it with arrayChunkJson() function.

thank you in advance!