DataTable is not refreshing after storing data into database

Why is the data in the DataTable is not refreshing after I store data into the database? you need to refresh the page first for the new data will be displayed into DataTable.

I tried to make a listener but still doesn't working.

This is my store function with emit

public function store(){

        $action = '';

        $data = $this->validate([
            'name' => 'required',
        ]);
        
        if($this->permissionId){
            Permission::find($this->permissionId)->update($data);
            $action = 'edit';
        }else{
            Permission::create($data);
            $action = 'store';
        }
        $this->emit('showEmitedFlashMessage', $action);
        $this->resetInputFields();
        $this->emit('refreshParent');
        $this->emitSelf('refreshTable');
        $this->emit('closePermissionModal');

    }
    ```

and this is my DataTable component where I make and event $refreshTable

'$refresh', ]; public $model = Permission::class; public function columns() { return [ NumberColumn::name('id') ->label('ID') ->defaultSort('asc') ->sortBy('id'), Column::name('name') ->label('Permission') ->searchable(), Column::delete() ]; } } ```

Start with the shown store() method and the PermissionDatatable listener declaration, then trace how the refreshTable event is dispatched and handled. Done means newly stored or updated Permission records appear in the DataTable without a full page refresh.