I created a todo task list, and when I add the livewire sortable it seems to make everything extra laggy.
This is how it looks before I add sortable and everything works smoothly without issues.
Parent
<ul class="flex flex-col space-y-2 focus:outline-none">
<h3 class="text-xl font-semibold">To Do Tasks</h3>
@foreach ($cardtasks as $cardtask )
<li class="cursor-pointer ">
@livewire('kanbans.show-cardtasks', ['cardtask'=>$cardtask], key('modal-task-'.$cardtask->id))
</li>
@endforeach
</ul>
Child Component
<div class="space-x-3 items-center">
@if ($cardtask->status === 0)
<input type="checkbox" wire:click="taskComplete({{ $cardtask->id }})" class="focus:outline-none focus:ring-0 h-6 w-6 text-green-400 rounded-md border-blue-500 border-2">
<span class=" text-gray-700 text-base">{{$cardtask->title}}</span>
@else
<input type="checkbox" wire:click="taskIncomplete({{ $cardtask->id }})" class="focus:outline-none focus:ring-0 h-6 w-6 text-green-400 rounded-md border-blue-500 border-2" checked>
<span class=" text-gray-400 line-through text-base italic">{{$cardtask->title}}</span>
@endif
</div>
Video of the app working
When I try and add the sortable feature. It becomes super glitchy
<ul wire:sortable="updateCardTaskOrder"
class="flex flex-col space-y-2 focus:outline-none">
<h3 class="text-xl font-semibold">To Do Tasks</h3>
@foreach ($cardtasks as $cardtask )
<li wire:sortable.item="{{ $cardtask->id }}" wire:key="cardtask-sort-{{ $cardtask->id }}" class="cursor-pointer ">
@livewire('kanbans.show-cardtasks', ['cardtask'=>$cardtask], key('modal-task-'.$cardtask->id))
</li>
@endforeach
</ul>
public function updateCardTaskOrder($cardtasks)
{
foreach($cardtasks as $cardtask) {
Cardtask::find($cardtask['value'])->update(['order' => $cardtask['order']]);
}
$this->cardtasks = Cardtask::where('card_id', $this->card_id)
->orderBy('order', 'ASC')
->get();
}
In this video, you can see me having to click multiple times before it updates the status. Any advice on how to fix this is much appreciated 
