Custom Livewire Component, Datatable unloading

<?php

namespace App\Http\Livewire;

use Illuminate\Support\Facades\DB;
use Livewire\Component;

class SqlTable extends Component
{
    public $receivedQuery = '';
    public $sqlResultsJson = '';

    public $sqlResults = [];
    public $headers = [];

    protected $listeners = ['querySubmitted' => 'handleQuerySubmitted'];

    public function handleQuerySubmitted($query): void
    {
        $this->receivedQuery = $query;
        $this->sqlResultsJson = json_encode(DB::select($query));
        $this->sqlResults = json_decode($this->sqlResultsJson, true);

        // Get headers from the first row, if available
        if (!empty($this->sqlResults)) {
            $this->headers = array_keys($this->sqlResults[0]);
        } else {
            $this->headers = [];
        }

        // Init the DataTable
       $this->emit('refreshComponent');
    }





    public function render()
    {
        return view('livewire.sql-table');
    }
}

<?php

namespace App\Http\Livewire;

use Illuminate\Support\Facades\DB;
use Livewire\Component;

class SqlTable extends Component
{
    public $receivedQuery = '';
    public $sqlResultsJson = '';

    public $sqlResults = [];
    public $headers = [];

    protected $listeners = ['querySubmitted' => 'handleQuerySubmitted'];

    public function handleQuerySubmitted($query): void
    {
        $this->receivedQuery = $query;
        $this->sqlResultsJson = json_encode(DB::select($query));
        $this->sqlResults = json_decode($this->sqlResultsJson, true);

        // Get headers from the first row, if available
        if (!empty($this->sqlResults)) {
            $this->headers = array_keys($this->sqlResults[0]);
        } else {
            $this->headers = [];
        }

        // Init the DataTable
       $this->emit('refreshComponent');
    }





    public function render()
    {
        return view('livewire.sql-table');
    }
}

<div>
    @php
        $data = json_decode($this->sqlResultsJson, true);
        $headers = !empty($data) ? array_keys($data[0]) : [];
    @endphp
    <p>Received Query: {{ $receivedQuery }}</p>

    <div>
        <h1>Received Query data:</h1>
    </div>

    @if (is_array($data) && count($data) > 0 && is_array($headers) && count($headers) > 0)
        <table id="queryResultsTable" class="display">
            <thead>
            <tr>
                @foreach ($headers as $header)
                    <th>{{ $header }}</th>
                @endforeach
            </tr>
            </thead>
            <tbody>
            @foreach ($data as $row)
                <tr>
                    @foreach ($row as $value)
                        <td>{{ $value }}</td>
                    @endforeach
                </tr>
            @endforeach
            </tbody>
        </table>
    @else
        <p>No data available</p>
    @endif
</div>

@push('scripts')
    <script>
        let dataTable;

        function initializeDataTable() {
            dataTable = $('#queryResultsTable').DataTable();
        }

        Livewire.on('refreshComponent', function () {
            if (dataTable) {
                dataTable.destroy();
            }
            initializeDataTable();
        });

        $(document).ready(function () {
            initializeDataTable();
        });
    </script>
@endpush

<div>
    @php
        $data = json_decode($this->sqlResultsJson, true);
        $headers = !empty($data) ? array_keys($data[0]) : [];
    @endphp
    <p>Received Query: {{ $receivedQuery }}</p>

    <div>
        <h1>Received Query data:</h1>
    </div>

    @if (is_array($data) && count($data) > 0 && is_array($headers) && count($headers) > 0)
        <table id="queryResultsTable" class="display">
            <thead>
            <tr>
                @foreach ($headers as $header)
                    <th>{{ $header }}</th>
                @endforeach
            </tr>
            </thead>
            <tbody>
            @foreach ($data as $row)
                <tr>
                    @foreach ($row as $value)
                        <td>{{ $value }}</td>
                    @endforeach
                </tr>
            @endforeach
            </tbody>
        </table>
    @else
        <p>No data available</p>
    @endif
</div>

@push('scripts')
    <script>
        let dataTable;

        function initializeDataTable() {
            dataTable = $('#queryResultsTable').DataTable();
        }

        Livewire.on('refreshComponent', function () {
            if (dataTable) {
                dataTable.destroy();
            }
            initializeDataTable();
        });

        $(document).ready(function () {
            initializeDataTable();
        });
    </script>
@endpush