¿Cómo puedo desmarcar una casilla de verificación en Laravel Livewire para que los cambios se reflejen en la base de datos?

Por favor, necesito ayuda para resolver este problema. Estoy usando Laravel Spatie roles y permisos, quiero agregar permisos al rol usando checkboxes. Hasta ahora, agregar permisos a los roles está funcionando bien, pero al editar roles, si desmarco los permisos para un rol, no refleja los cambios en la base de datos. Cualquier ayuda será agradecida.

Esta es la vista:

<!-- Modal -->
<div class="modal " id="roleModal" tabindex="-1" aria-labelledby="roleModalLabel" aria-="" hidden="true">
   <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="roleModalLabel">Role</h5>
           <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">×</span>
    </button>
  </div>
  <div class="modal-body">
    <form method="POST">
                    @csrf

    <div class="col-span-6 sm:col-span-4">
        <x-jet-label for="role" value="{{ __('Role') }}"></x-jet-label>
        <x-jet-input id="role" type="text" class="mt-1 block w-full" wire:model.defer="roleName"></x-jet-input>
        <x-jet-input-error for="role" class="mt-2"></x-jet-input-error>
    </div>

      <div class="block">
        <strong>Permission:</strong>
        <br>
        @foreach($permissions as $key => $permission)
         <x-jet-label value="{{ $permission->name }}"></x-jet-label>

        <x-jet-checkbox id="permission" value="{{$permission->id}}" type="checkbox" class="mt-1 block " wire:model.defer="permissionId"></x-jet-checkbox>
        <br>
        @endforeach
   </div>
   {{-- {{dd($permission->id)}} --}}
    </form>
  </div>
  <div class="modal-footer">
    <button type="button" class="bg-red-500 text-white active:bg-indigo-600 px-3 py-2 
   rounded outline-none focus:outline-none" wire:click="closeModal">Close</button>

    @if ($editMode)
        <button type="button" class="bg-indigo-500 text-white active:bg-indigo-600 px-3 
     py-2 rounded outline-none focus:outline-none" wire:click="updateRole">Save 
    changes</button>
    @else

    <button type="button" class="btn btn-primary" wire:click="storeRole">Create 
   Role</button>
  @endif
  </div>
</div>

Este es el componente Livewire para el rol:

“`
class Roles extends Component
{
public $editMode = false;
public $roleId;
public $roleName;
public $permissionId = [];

public function showEditModal($id)
{
$this->reset();

<pre><code>$this->editMode = true;

$this->roleId = $id;

$this->loadRole();

$this->dispatchBrowserEvent('modal', ['modalId' => '#roleModal', 'actionModal' => 'show']);
</code></pre>

}

public function loadRole()
{
$role = Role::find($this->roleId);

<pre><code>$this->roleName = $role->name;
$this->permissionId = $role->permissions->pluck('id');
</code></pre>

}

public function updateRole()
{

<pre><code>$role = Role::find($this->roleId);

$role->update(['name' => $this->roleName ]);

$role->syncPermissions($this->permissionId);

$this->reset();

$this->dispatchBrowserEvent('modal', ['modalId' => '#roleModal', 'actionModal' => 'hide']);

session()->flash('message', 'Role Updated Successfully');
</code></pre>

}

public function deleteRole($id)
{
$role = Role::find($id);

<pre><code>$role->delete();

session()->flash('message', 'Role Deleted Successfully');
</code></pre>

}

public function closeModal()
{
$this->reset();
$this->dispatchBrowserEvent('modal', ['modalId' => '#roleModal', 'actionModal' => 'hide']);
}

public function render()
{
$roles = Role::orderBy('id','DESC')->paginate(5);

<pre><code>$permissions = Permission::get();

return view('livewire.roles', ['roles' => $roles, 'permissions' => $permissions ]);
</code></pre>

}
}
“`