Laravel Livewire fetching data and paginate problem

Hi im new to Laravel and i creating a beautiful things with livewire-jetstream , Right now im working on a child table (services) that get id from parent (customer) via route. i have two problems and one question.

1.I have to functions remoteShowModal() and loadCustomer() on loadcustomer make a query regarding parent id and successfully fetch data when i dd() inside function, so then i try to load on the remoteShowModal to fill the data on my modal form , for some reason when i call loadcustomer() is null inside remoteShowModal() then i tried to put inside the query on the remoteShowModal() and fetching the data BUT when i press the modal the doesnt fetching the data on the form... when i dd() on the remoteShowModal() the data is there... what is the problem with that ?? That is supose to do is when open the modal must fetch the data like name ,etc, on the form from the the relative Customer.

2.At the bottom of the code ServiceShow.php trying to get work with ->paginate($this->perPage,['id', 'service_type']); with ->get(); But i get error when i remove the ->get(); the table don't load, also when i trying to remove the code transfer it to mount() for clearer code the dynamic table doesnt work... for example when i add or delete a data must press f5 to see the result. Is there any way to make it work with paginate?

Question: on mount() and render() is there any way to make that queries better to runs at once? I had problems with fetching parent data on that blade.. show i make a second query to fetch the customer data, It works but i dont know if its correct.

the meaning of that queries is to fetcing all data of services of spesific customerID and also to have acess to data of the relative customer like customer->name

Thank you in advantance.

here is my ServiceShow.php:

<?php

namespace App\Http\Livewire\Services;

use App\Models\Customer;
use App\Models\Service;
use Livewire\WithPagination;
use Illuminate\Validation\Rule;



use Livewire\Component;

class ServiceShow extends Component
{
  use WithPagination;

 public $customerID;
 public $serviceID;
 public $customers; 
 public $services; 
 public $service_type; 
 public $km; 

 public $sortBy= 'id';
 public $sortDirection = 'asc';
 public $headers;
 public $perPage ='5';
 public $search;



 public $sortField = 'id';
 public $sortAsc = true;


 public $modalFormVisible= false;
 public $modalConfirmDeleteVisible= false;
 public $RemoteForm= false;


 public function createShowModal(){
  
    $this->resetValidation();
    $this->resetvars();
    $this->modalFormVisible = true;
}

public function remoteShowModal($customerID){
    
    $this->customerID=$customerID;
    $customer=customer::find($this->customerID);
   
    $this->name=$customer->name;

    $this->plate= $customer->plate;
    $this->RemoteForm = true;
   
   
    

    // dd($this->name);
}



public function deleteShowModal($serviceID){
    $this->serviceID=$serviceID;
    $this->modalConfirmDeleteVisible = true;
}
  
public function resetvars(){
    $this->service_type=null;
    $this->km=null;
    $this->serviceID=null;
}


public function delete(){
       
    Service::destroy($this->serviceID);
    $this->modalConfirmDeleteVisible = false;
    $this->resetPage();
}



public function updated($propertyName)
{
    $this->validateOnly($propertyName);


}


protected function rules() {
    
    return [
        'service_type' => 'required',
        'km' => 'required'
    ];
    
}

public function updateModal($serviceID)
{ 
    $this->serviceID=$serviceID;
    $this->modalFormVisible = true;
   
    $this->loadService();


}

public function loadService(){

    $service=service::find($this->serviceID);
    
    $this->service_type=$service->service_type;
    $this->km= $service->km;

}
public function loadCustomer(){

    $customer=customer::find($this->customerID);
   
    $this->name=$customer->name;
    $this->plate= $customer->plate;
  
}


public function update()
{
    $this->validate();
   
    $data = [
        'service_type' => $this->service_type,
        'km' => $this->km,
    ];

       service::find ($this->serviceID)->update($data);
       $this->modalFormVisible = false;
       $this->resetValidation();
      
}





public function save($customerID)
{
    
    $customer = Customer::findOrFail($customerID);
    $this->validate();
   
    $data = [
        'service_type' => $this->service_type,
        'km' => $this->km,
    ];


    
    $customer->services()->create($data);
    $this->resetValidation();

    // service::create($data);
   
     $this->modalFormVisible = false;
   
}





public function sortBy($field){
    if ($this->sortDirection =='asc'){
        $this ->sortDirection ='desc';

    }
    else{
        $this->sortDirection ='asc';
    }
    return $this ->sortBy = $field;
}


  
 public function mount($customerID)
 {
     
   $this->customers= Customer::where('id','=',$customerID)->find($customerID);
  // dd($this->customers);

  
     //->paginate($this->perPage)
    

 //   dd($this->services);
  
 }


//  public function retreive($customerID)
//  { 
//     $data = Service::where('services.customer_id','=',$customerID)->with(['customer'])->get();
  
//  }


 public function render()
 {  
    $this->services = Service::where('services.customer_id','=',$this->customerID)      
    ->search($this->search)
    //->orderBy($this->sortField, $this->sortAsc ? 'asc' : 'desc')
   ->orderBy($this->sortBy,$this->sortDirection)
   
    //->paginate($this->perPage,['id', 'service_type']);
  
    ->get();

     return view('livewire.services.service-show',['services' =>$this->services], ['customer' => $this->customerID],['customers' => $this->customers])
     ->extends('admin.dashboard')
     ->section('content');
 }
}

and my Blade:

<div>

    <div class="container py-5 text-center">

        <h1 class="py-2">{{ ($customers->name) }} </h1>
        <h1>Services: {{ $services->count() }}</h1>
     
        <div class="row mb-2">
         <!-- Insert Button trigger modal -->
         <div class=" mx-1  py-4">
            <x-jet-button wire:click="createShowModal">
                {{ __('Create Service') }}
            </x-jet-button>
        </div>

        <!-- Remote Button trigger modal -->
        <div class=" mx-1  py-4">
            <x-jet-button wire:click="remoteShowModal({{ $customers->id }})">
                {{ __('Remote Access') }}
            </x-jet-button>
        </div>


    </div>
        <!-- Create modal -->

        <x-jet-dialog-modal wire:model="modalFormVisible">
            <x-slot name="title">
                {{ __('Save Customer') }}
            </x-slot>

            <x-slot name="content">
                <div class="mt-4">
                    <x-jet-label for="service_type" value="{{ __('Service Type') }}" />
                    <x-jet-input id="service_type" type="text" class="mt-1 block w-full" type='text'
                        wire:model.debounce.800ms="service_type" />
                    <x-jet-input-error for="service_type" id="service_type-error" class="mt-2" />
                    </label>
                </div>
                <div class="mt-4">
                    <x-jet-label for="km" value="{{ __('km') }}" />
                    <x-jet-input id="km" type="text" class="mt-1 block w-full" type='text'
                        wire:model.debounce.800ms="km" />
                    <x-jet-input-error for="km" id="km-error" class="mt-2" />
                    </label>
                </div>

            </x-slot>

            <x-slot name="footer">

                <x-jet-secondary-button wire:click="$toggle('modalFormVisible')" wire:loading.attr="disabled">
                    {{ __('Cancel') }}
                </x-jet-secondary-button>
                @if($serviceID)
                    <x-jet-danger-button class="ml-2" wire:click="update" wire:loading.attr="disabled">
                        {{ __('Update') }}
                    </x-jet-danger-button>
                @else
                    <x-jet-danger-button class="ml-2" wire:click="save({{ $customer }})" wire:loading.attr="disabled">
                        {{ __('Save') }}

                    </x-jet-danger-button>
                @endif
            </x-slot>
        </x-jet-dialog-modal>




        <!-- Delete modal -->
        <x-jet-dialog-modal wire:model="modalConfirmDeleteVisible">
            <x-slot name="title">

                {{ __('Delete Page') }}

            </x-slot>

            <x-slot name="content">
                {{ __('Are you sure you want to delete this page? Once the page is deleted, all of its resources and data will be permanently deleted.') }}
            </x-slot>

            <x-slot name="footer">
                <x-jet-secondary-button wire:click="$toggle('modalConfirmDeleteVisible')" wire:loading.attr="disabled">
                    {{ __('Nevermind') }}
                </x-jet-secondary-button>

                <x-jet-danger-button class="ml-2" wire:click="delete" wire:loading.attr="disabled">
                    {{ __('Delete Page') }}
                </x-jet-danger-button>
            </x-slot>
        </x-jet-dialog-modal>


     

        <!-- Remote modal -->
        <x-jet-dialog-modal wire:model="RemoteForm">
            <x-slot name="title">
                {{ __('Remote Access') }}
            </x-slot>

            <x-slot name="content">
                <div class="mt-4">
                    <x-jet-label for="name" value="{{ __('Name') }}" />
                    <x-jet-input id="name" type="text" class="mt-1 block w-full" type='text'
                        wire:model.debounce.800ms="name" />
                    <x-jet-input-error for="name" id="name-error" class="mt-2" />
                    </label>
                </div>
                <div class="mt-4">
                    <x-jet-label for="plate" value="{{ __('plate') }}" />
                    <x-jet-input id="plate" type="plate" class="mt-1 block w-full" type='text'
                        wire:model.debounce.800ms="plate" />
                    <x-jet-input-error for="plate" id="plate-error" class="mt-2" />
                    </label>
                </div>

            </x-slot>

            <x-slot name="footer">

                <x-jet-secondary-button wire:click="$toggle('RemoteForm')" wire:loading.attr="disabled">
                    {{ __('Cancel') }}
                </x-jet-secondary-button>


                <x-jet-danger-button class="ml-2" wire:click="save" wire:loading.attr="disabled">
                    {{ __('Create') }}
                </x-jet-danger-button>

            </x-slot>
        </x-jet-dialog-modal>

   
        <div class="row mb-2">
            <div class="w-1/10 relative mx-3">
                Per Page:&nbsp;
                <select wire:model="perPage"
                    class="block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500">
                    <option>5</option>
                    <option>10</option>

                </select>

            </div>


            <div class="w-1/6 relative mx-1  py-4">
                <select wire:model="sortField"
                    class="block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
                    id="grid-state">
                    <option value="id">ID</option>
                    <option value="km">km</option>

                </select>

            </div>
            <div class="w-1/6 relative mx-1 py-4">
                <select wire:model="sortAsc"
                    class="block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
                    id="grid-state">
                    <option value="1">Ascending</option>
                    <option value="0">Descending</option>
                </select>

            </div>
            <div class="w-1/4 mx-1  py-4">
                <input wire:model.debounce.300ms="search" type="text"
                    class="block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
                    placeholder="Search users...">
            </div>

      
        </div>

        <div class="flex flex-col">
            <div class="-my-2 overflow-x-auto">
                <div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
                    <div class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
        
        <table class="table-auto w-full mb-6">
            <thead>
                <tr>
                    <th class="px-6 py-3 bg-gray-50 text-center text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider"
                        wire:click="sortBy('id')" style="cursor: pointer;">ID
                        @include('layouts.partials.sort_icons',['field'=>'id'])
                    </th>

                    <th class="px-6 py-3 bg-gray-50 text-center text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider"
                        wire:click="sortBy('Service_type')" style="cursor: pointer;">Service_type
                        @include('layouts.partials.sort_icons',['field'=>'Service_type'])
                    </th>
                    <th class="px-6 py-3 bg-gray-50 text-center text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider"
                        wire:click="sortBy('km')" style="cursor: pointer;">Km
                        @include('layouts.partials.sort_icons',['field'=>'Km'])
                    </th>

                    <th
                        class="px-6 py-3 bg-gray-50 text-center text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
                        Action</th>

                </tr>
            </thead>
            <tbody>
                @if($services->count())
                    @foreach($services as $service)
                        <tr>
                            <td class="border px-4 py-2">{{ $service->id }}</td>
                            <td class="border px-4 py-2">{{ $service->service_type }}</td>
                            <td class="border px-4 py-2">{{ $service->km }}</td>

                            <td class="border px-2 py-2">
                                <button wire:click="updateModal({{ $service->id }})"><i class="fa fa-edit"></I>
                                </button>
                                <button wire:click="deleteShowModal({{ $service->id }})"><i class="fa fa-trash"></I>
                                </button>
                            </td>
                        </tr>
                    @endforeach
                @endif
            </tbody>
        </table>

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

</div>

<div class="grid grid-cols-3 gap-4 min-w-screen min-h-screen bg-gray-100 px-5 py-5">

    @if($services->count())
        @foreach($services as $service)


            <div
                class="md:w-3/3  bg-white px-8 md:px-10 py-8 md:py-10 mb-3  md:my-6 rounded-md shadow-lg shadow-gray-600 md:flex md:flex-col">
                <div class="w-full flex-grow">

                    <h2 class="text-center font-bold uppercase mb-4">ID {{ $service->id }}</h2>
                    <h3 class="text-center font-bold text-4xl mb-5">/mo</h3>
                    <ul class="text-sm px-5 mb-8">
                        <li class="leading-tight"><i class="mdi mdi-check-bold text-lg"></i></li>
                        <li class="leading-tight"><i class="mdi mdi-check-bold text-lg"></i> Dolor sit amet</li>
                        <li class="leading-tight"><i class="mdi mdi-check-bold text-lg"></i> Consectetur</li>
                        <li class="leading-tight"><i class="mdi mdi-check-bold text-lg"></i> Adipisicing</li>
                        <li class="leading-tight"><i class="mdi mdi-check-bold text-lg"></i> Much more...</li>
                    </ul>
                </div>
                <div class="w-full">
                    <button
                        class="font-bold bg-gray-600 hover:bg-gray-700 text-white rounded-md px-10 py-2 transition-colors w-full">Buy
                        Now</button>
                </div>
            </div>


        @endforeach
    @endif
</div>

</div>