Laravel Livewire Edit Role Spatie - laravel

Question

Help, I work with laravel and spatie for roles and permissions.
I want to edit my permissions
with a checkbox list
from a window Attached code:
En el componente:
public $role;
public $rol_id, $name;
public $chek = [];
public function mount(Role $role)
{
$this->role = $role;
$this->data = $role->toArray();
$this->chek = $this->role->permissions()->pluck('id')->toArray();
}
protected $rules =[
'role.name' => 'required'
];
public function render()
{
$permisos = Permission::all();
return view('roles.edit-rol-component', compact('permisos'));
}
public function update(){
$role = $this->role;
$this->validate([
'role.name' => 'required',
]);
$this->role->save();
$role->syncPermissions(['permission'=> $this->chek]);
$this->emit('alert','success','El rol se editó correctamente.');
$this->closeModalWithEvents([
RolComponent::getName() => 'renderEvent']);
}
In the view, the list generator shows me but it marks the checks wrong
#foreach($permisos as $key => $value)
<label class="inline-flex items-center">
<input wire:model.defer="chek.{{$value->id}}"
type="checkbox" value="{{ $value->id }}"
class="form-checkbox h-4 w-4 text-green-500"
#if($role->permissions->contains($value->id)) checked #endif >
<span class="ml-3 text-sm">{{ $value->name }} </span>
</label>
#endforeach

Answer 1

enter image description here
I am doing the edit / delete this way (as shown in the image)
Blade
<table class="table card-table table-vcenter text-nowrap table-hover table-striped datatable fs-5">
<thead>
<tr>
<th>#</th>
<th></th>
<th>Role</th>
<th></th>
<th>Permissions</th>
<th></th>
</tr>
</thead>
<tbody>
#foreach ($roles as $id => $single)
#php
$badgeColor = ['badge bg-blue-lt',
'badge bg-azure-lt',
'badge bg-purple-lt',
'badge bg-pink-lt',
'badge bg-indigo-lt',
'badge bg-red-lt',
'badge bg-orange-lt',
'badge bg-cyan-lt',
'badge bg-yellow-lt',
'badge bg-green-lt'
];
#endphp
<tr>
<td>{{ $id + 1 }}.</td>
<td></td>
<td>{!! strtoupper($single->label) !!}</td>
<td></td>
<td>
<div class="btn-list">
#foreach ($single->permissions as $permission)
<span class="{{ $badgeColor[rand(0, 9)] }} fs-5">{{ $permission->label }} <span class="ps-1" style="cursor: pointer" wire:click='revokePermission({{ $single->id }}, {{ $permission->id }})'>x</span></span>
#endforeach
</div>
</td>
<td class="text-end">
<button class="btn btn-danger p-1 fs-6"><i class="fas fa-trash-alt"></i></button>
</td>
</tr>
#endforeach
</tbody>
</table>
Component:
public function revokePermission($roleId, $permissionId)
{
$role = Role::findOrFail($roleId);
$permission = ModelsPermission::findOrFail($permissionId);
$role->revokePermissionTo($permission->name);
$this->render();
}