Why the DataTable is not refresh or automatically display after I stored new data in the database?

Why do I need to refresh the page to see the updated data in the DataTable after I save/store data to the database?

I have three component

1. PermissionTable - for my landing page
2. Permission Form - for my Modal Form
3. PermissionDataTable - for the query of my DataTable

Permission Table

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use Spatie\Permission\Models\Permission;
use Livewire\WithPagination;

class PermissionTable extends Component
{
    use WithPagination;

    public $permissionId;

    protected $listeners = [
        'refreshParent' => '$refresh',
        'deletePermission',
        'showEmitedFlashMessage'
    ];

    public function showEmitedFlashMessage($action)
    {
        if($action == 'edit') {
            session()->flash('edit','Permission Updated Successfully.');
        } else {
            session()->flash('store','Permission Created Successfully.');
        }    
    }

    public function render()
    {
        return view('livewire.permission-table',[
            'permissions' => Permission::paginate(10)->sortBy('id'),
        ]);
    }

    public function createPermission(){
        $this->emit('resetInputFields');
        $this->emit('openPermissionModal');
    }
}

and my Form component

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use Spatie\Permission\Models\Permission;

class PermissionForm extends Component
{
    public $slug, $permissionId, $name;

    protected $listeners = [
        'permissionId',
        'resetInputFields'
    ];

    public function resetInputFields(){
        $this->reset();
    }
    
    public function permissionId($permissionId){
        $this->permissionId = $permissionId;
        $permission = Permission::find($permissionId);
        $this->name = $permission->name;
    }

    public function render()
    {
        return view('livewire.permission-form');
    }

    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->emit('closePermissionModal');

    }
}

and the PermissionDatatable component

<?php

namespace App\Http\Livewire;

use App\Models\Permission;
use Mediconesystems\LivewireDatatables\Http\Livewire\LivewireDatatable;
use Mediconesystems\LivewireDatatables\Column;
use Mediconesystems\LivewireDatatables\NumberColumn;

class PermissionDatatable extends LivewireDatatable
{
    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()

            
        ];
    }
}

and my scripts

<script>

    window.livewire.on('closePermissionModal', () => {
        $('#permissionModal').modal('hide');
    });

    window.livewire.on('openPermissionModal', () => {
        $('#permissionModal').modal('show');
    });


</script>

and this my view

<div>
     <!-- page content -->
     <div class="row">
        <div class="col-md-12 col-sm-12 ">
            
            <div class="dashboard_graph">
                <div class="row x_title">
                    <div class="col-md-6">
                        <h3>Permissions</h3>
                    </div>
                </div>
                <div class="row">
                    @if (session()->has('store'))
                        <div class=" col-md-12 alert alert-success">
                            {{ session('store') }}
                        </div>
                    @endif
                    @if (session()->has('edit'))
                        <div class="col-md-12 alert alert-success">
                            {{ session('edit') }}
                        </div>
                    @endif
                    <!-- Button trigger modal -->
                    <button type="button" wire:click="createPermission" class="btn btn-primary ml-3" data-keyboard="false">
                        <i class="glyphicon glyphicon-plus"></i>&nbsp Add Permission
                    </button>

                    <div class="col-md-12 col-sm-12 ">
                        <div class="x_panel">
                            <div class="x_content">
                                <div class="row">
                                    <div class="col-sm-12">
                                        <div class="card-box table-responsive">                                
                                            <div class="display">
                                                <div class="row">
                                                    <div class="col-sm-12">
                                                        <livewire:permission-datatable exportable/>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div><!--end sa table row--->

                </div>         
            </div>
        </div>

    </div>
    <!-- /page content -->

     <!-- The Modal -->
     <div wire.ignore.self class="modal fade" id="permissionModal" tabindex="-1" role="dialog" aria-labelledby="permissionModal" aria-hidden="true" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog" role="document">
            <livewire:permission-form />
        </div>
    </div>
</div>

@section('custom_script')
    @include('layouts.shared.scripts.permission_scripts'); 
@endsection

Start with the PermissionTable, PermissionForm, and PermissionDatatable components, especially the refreshParent listener and the embedded livewire:permission-datatable entry point. Trace the emitted events after store() and check how the datatable refreshes its query; done means newly stored or updated permissions appear without a full page refresh.