Livewire not updating with values from db after event

Question

I am trying to have all the lengths selected from the buttons then one could go back and change specific values for different stations. Right now both work, but when I use the button right now I get an error

Call to a member function refresh() on array I tried using update/updating but it doesn't bring the values from the database.

<div>
       <button wire:click="$emit('sec60')">60 Sec</button>
       <button wire:click="$emit('sec30')">30 Sec</button>

<table class="table-auto w-full mb-6">
          <thead>
            <tr>
             <th  style="cursor: pointer;" class="px-4 py-2">Spot Length @include('partials.sort-icon',['field'=>'spot_length'])</th>
            </tr>
          </thead>
          <tbody>
   @foreach($selected_stations as $key => $selected_station)
              <tr>
                <td class="border px-4 py-2">
                    <select  wire:model="spot_length.{{$selected_station->id}}" 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" value="{{$current_workbook->stations()->find($selected_station->id)->pivot->spot_length}}">
                        <option value="">Select One</option> 
                        <option value="30">:30</option>
                        <option value="60">:60</option>
                    </select>
                </td>
              </tr>
            @endforeach
          </tbody>
        </table>
</div>

public function mount($client, $workbook){
        
        $this->selected_stations= $workbook->stations;
        $this->current_workbook = Workbook::find($this->workbook_id);
        $this->spot_length = $this->selected_stations->pluck('pivot.spot_length', 'id')->all();
    }

    public function sec30(){
        foreach($this->selected_stations as $key => $selected_station){
            $this->current_workbook->stations()->updateExistingPivot($selected_station->id, ['spot_length'=>30]);
        }
        $this->spot_length->refresh();
    }

    public function sec60(){
        foreach($this->selected_stations as $key => $selected_station){
            $this->current_workbook->stations()->updateExistingPivot($selected_station->id, ['spot_length'=>60]);
        }
        $this->spot_length->refresh();
    }
    public function updatedSpot($value, $key){
        $this->current_workbook->stations()->updateExistingPivot($key, ['spot'=>$value]);
    }

Answer 1

Create a new property that store the id of the $workbook passed in mount.

public $workbook_id;

public function mount($client, $workbook){
  $this->workbook_id = $workbook->id;
  $this->selected_stations= $workbook->stations;
  $this->current_workbook = Workbook::find($this->workbook_id);
  $this->spot_length = $this->selected_stations->pluck('pivot.spot_length', 'id')->all();
}

public function sec30(){
   foreach ($this->selected_stations as $key => $selected_station) {                           
      $this->current_workbook->stations()->updateExistingPivot($selected_station->id,  ['spot_length'=>30]);
   }
   $this->refreshSpotLenghtProperty();
}

public function refreshSpotLenghtProperty()
{
   $workbook = WorkBook::where('id',$this->workbook_id)->first();
   if($workbook) {
      $this->selected_stations = $workbook->stations;
      $this->spot_length = $this->selected_stations->pluck('pivot.spot_length', 'id');
   }
}