help!! how to make recalculate usage btn work? with reloading new data inside charts

blade file

<div>
    <div class="row layout-top-spacing">
        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 text-end">
            <button type="button" wire:click="fetchServerUsage"
                class="btn btn-outline-info _effect--ripple waves-effect waves-light">
                Recalculate Usage
            </button>
        </div>
    </div>
    <div class="row mt-2">
        <!-- CPU Usage -->
        <div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12 layout-spacing">
            <div class="widget widget-six">
                <div class="widget-heading">
                    <h6 class="mb-1">CPU Usage</h6>
                </div>
                <div class="w-chart align-items-center justify-content-center" wire:ignore>
                    <div id="cpu-chart"></div>
                </div>
            </div>
        </div>

        <!-- RAM Usage -->
        <div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12 layout-spacing">
            <div class="widget widget-six">
                <div class="widget-heading">
                    <h6 class="mb-1">RAM Usage</h6>
                </div>
                <div class="w-chart align-items-center justify-content-center" wire:ignore>
                    <div id="ram-chart"></div>
                </div>
            </div>
        </div>

        <!-- Disk Usage -->
        <div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12 layout-spacing">
            <div class="widget widget-six">
                <div class="widget-heading">
                    <h6 class="mb-1">Disk Usage</h6>
                </div>
                <div class="w-chart align-items-center justify-content-center" wire:ignore>
                    <div id="disk-chart"></div>
                </div>
            </div>
        </div>

        {{ json_encode($cpuUsage) }}
        {{ json_encode($ramUsage) }}
        {{ json_encode($diskUsage) }}

    </div>
</div>
@script
    <script>
        setTimeout(() => {
            let cpuUsage = {{ (float) preg_replace('/[^\d.]/', '', $cpuUsage) }} || 0;

            @php
                preg_match('/(\d+)\/(\d+)/', $ramUsage, $ramMatches);
                preg_match('/([\d.]+)G\s+\/\s+([\d.]+)G/', $diskUsage, $diskMatches);
            @endphp

            let ramUsage = {{ isset($ramMatches[1]) ? (int) $ramMatches[1] : 0 }};
            let ramTotal = {{ isset($ramMatches[2]) ? (int) $ramMatches[2] : 1 }};
            let ramPercent = (ramUsage / ramTotal) * 100;

            let diskUsage = {{ isset($diskMatches[1]) ? (float) $diskMatches[1] : 0 }};
            let diskTotal = {{ isset($diskMatches[2]) ? (float) $diskMatches[2] : 1 }};
            let diskPercent = (diskUsage / diskTotal) * 100;

            function createGaugeChart(element, value, label) {
                var options = {
                    series: [value],
                    chart: {
                        height: 250,
                        type: "radialBar",
                        offsetY: -10
                    },
                    plotOptions: {
                        radialBar: {
                            startAngle: -135,
                            endAngle: 135,
                            track: {
                                background: "#e0e0e0"
                            },
                            dataLabels: {
                                name: {
                                    fontSize: "16px",
                                    color: "#888",
                                    offsetY: 120
                                },
                                value: {
                                    offsetY: 76,
                                    fontSize: "22px",
                                    color: undefined,
                                    formatter: function(val) {
                                        return val + "%";
                                    }
                                }
                            }
                        }
                    },
                    fill: {
                        type: "gradient",
                        gradient: {
                            shade: "dark",
                            shadeIntensity: 0.15,
                            inverseColors: false,
                            opacityFrom: 1,
                            opacityTo: 1,
                            stops: [0, 50, 65, 91]
                        }
                    },
                    stroke: {
                        dashArray: 4
                    },
                    labels: [label]
                };

                var chart = new ApexCharts(document.querySelector(element), options);
                chart.render();
            }

            createGaugeChart("#cpu-chart", cpuUsage, "CPU Usage");
            createGaugeChart("#ram-chart", ramPercent.toFixed(2), "RAM Usage");
            createGaugeChart("#disk-chart", diskUsage, "Disk Usage");
        }, 2000);
    </script>
@endscript

component file

<?php

namespace App\Livewire\Admin;

use App\Models\VpsServer;
use Illuminate\Support\Facades\Log;
use Livewire\Component;
use phpseclib3\Crypt\PublicKeyLoader;
use phpseclib3\Net\SSH2;

class VpsManager extends Component
{
    public VpsServer $server;
    public $command;
    public $output = '';

    public $cpuUsage = 'N/A';
    public $ramUsage = 'N/A';
    public $diskUsage = 'N/A';
    public $isLoading = false;

    public function placeholder()
    {
        return <<<'HTML'
<div class="row layout-top-spacing">
    <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12 layout-spacing">
        <div class="card" aria-hidden="true">
            <div class="card-body">
                <h5 class="card-title placeholder-glow">
                    <span class="placeholder col-6"></span>
                </h5>
                <p class="card-text placeholder-glow">
                    <span class="placeholder col-7"></span>
                    <span class="placeholder col-4"></span>
                    <span class="placeholder col-4"></span>
                    <span class="placeholder col-6"></span>
                    <span class="placeholder col-8"></span>
                </p>
            </div>
        </div>
    </div>
</div>
HTML;
    }

    public function mount(VpsServer $server)
    {
        $this->server = $server;
        $this->fetchServerUsage();
    }

    private function connectToServer()
    {
        try {
            $ssh = new SSH2($this->server->ip_address, $this->server->port, 30);

            if (!empty($this->server->private_key)) {
                $key = PublicKeyLoader::load($this->server->private_key);
                if (!$ssh->login($this->server->username, $key)) {
                    throw new \Exception("SSH key authentication failed");
                }
            } else {
                if (!$ssh->login($this->server->username, $this->server->password)) {
                    throw new \Exception("Password authentication failed");
                }
            }

            return $ssh;
        } catch (\Exception $e) {
            Log::error("Error connecting to server: " . $e->getMessage());
            return false;
        }
    }

    public function fetchServerUsage()
    {
        $this->isLoading = true;

        $ssh = $this->connectToServer();

        if (!$ssh) {
            $this->cpuUsage = 'N/A';
            $this->ramUsage = 'N/A';
            $this->diskUsage = 'N/A';
            $this->isLoading = false;
            return;
        }

        try {
            $this->cpuUsage = trim($ssh->exec("top -bn1 | grep 'Cpu' | awk '{print 100 - $8}'")) . "%";
            $this->ramUsage = trim($ssh->exec("free -m | awk 'NR==2{printf \"%s/%s MB (%.2f%%)\", $3,$2,$3*100/$2 }'"));

            $diskUsageRaw = trim($ssh->exec("df -h --output=used,size,pcent / | tail -n 1"));
            list($used, $total, $percent) = preg_split('/\s+/', $diskUsageRaw);
            $this->diskUsage = "$used / $total ($percent)";
        } catch (\Exception $e) {
            Log::error("Error fetching server usage: " . $e->getMessage());
            $this->cpuUsage = 'Error';
            $this->ramUsage = 'Error';
            $this->diskUsage = 'Error';
        } finally {
            $this->isLoading = false;
        }
    }

    public function render()
    {
        return view('livewire.admin.vps-manager');
    }
}

someone please help. i cant suffer further, i cant understand livewire how this thing works?

i want that when its clicked Recalculate btn it would fetch new stats of server and display it in chart please help.

if u need the github repo ill pass it also

laravel12, livewire 3