After i save , the table didnt update like a realtime

@foreach($mealServices as $mealService) {{ $mealService->user->pgh_id }} {{ $mealService->user->first_name }} {{ $mealService->scan_date }} {{ $mealService->type }} @endforeach

document.addEventListener('livewire:initialized', function () {
    var barcodeInput = document.getElementById('barcodeInput');
    barcodeInput.focus();
    barcodeInput.addEventListener('input', function (event) {
        var activeTab = document.querySelector('.nav-link.active').id;
        var type = activeTab.split('-')[0];
        var value = event.target.value;
        if (value.length === 9 && /^\d{9}$/.test(value)) {
            console.log('Valid barcode detected:', value);
            // window.livewire.emit('barcodeScanned', { user_id: value, type: 'meal' }); //for multiple values
            // Livewire.dispatch('addMealService', value);
            // $wire.dispatchSelf('trigger')
            // Livewire.dispatch('addMealService', { data: value })
            Livewire.dispatch('addMealService', { data: value, type: type });
          
            barcodeInput.value = ''; // Clear the input after processing
        }
        
    });
    @this.on('error', function (message) {
        Swal.fire({
            icon: 'error',
            title: 'Error',
            text: message,
            timer: 2000,
            timerProgressBar: true,
            showConfirmButton: false
        });
    });
    @this.on('mealServiceAdded', function () {
        Swal.fire({
            icon: 'success',
            title: 'Success',
            text: 'Meal service has been recorded.',
            timer: 1000,
            timerProgressBar: true,
            showConfirmButton: false
        });
    });

    document.querySelectorAll('.nav-link').forEach(function (tab) {
        tab.addEventListener('click', function () {
            var tabId = this.id.split('-')[0];
            Livewire.dispatch('setActiveTab', {tab: tabId});
            setTimeout(function () {
                document.getElementById('barcodeInput').focus();
            }, 100);
        });
    });
});

class MealServices extends Component {

public $activeTab = 'breakfast';
protected $listeners = ['addMealService', 'setActiveTab'];
#[On('trigger')]
public function addMealService($data,$type)
{
    \Log::info('Data received in Livewire component', ['user_id' => $type]);

    $user = users_tbl::where('pgh_id', $data)->first();

    if ($user) {
        $today = Carbon::now('Asia/Manila')->startOfDay();
        $existingEntry = meal_service::where('user_id', $user->user_id)
            ->where('scan_date', '>=', $today)
            ->exists();

        if ($existingEntry) {
            $this->dispatch('error', 'Meal service entry already exists for today.');
        } else {
            meal_service::create([
                'user_id' => $user->user_id,
                'scan_date' => Carbon::now('Asia/Manila'),
                'type' => $type,
            ]);

            $this->dispatch('mealServiceAdded');
            // $this->dispatch('reinitSplide');
        }
    } else {
        $this->dispatch('error', 'User not found.');
    }
}
public function mount() {
    $this->activeTab = 'breakfast'; // Default tab
}
public function setActiveTab($tab) {
    $this->activeTab = $tab;
}

public function render()
{
    $mealServices = meal_service::with('user')->orderBy('scan_date', 'desc')->get();
    return view('livewire.meal-services', ['mealServices' => $mealServices]);
}

}