Example of Livewire/livewire in alighasemzadeh/dolist

File routes/web.php (link to Github)
use Illuminate\Support\Facades\Route;

//
Route::middleware(['auth:sanctum', 'verified', 'password.empty'])->group(function () {
    Route::get('/', \App\Http\Livewire\Dashbaord\Index::class)->name('home');
    //
});
File app/Http/Livewire/Dashbaord/Index.php (link to Github)
use App\Models\Task;
use Livewire\Component;

class Index extends Component
{
    public $task;
    public $tasks;

    protected $listeners = [
        'confirmedDone',
        'cancelledDone',
        'updateTasks' => 'updateTasks',
    ];

    public function mount()
    {
        $this->tasks = Task::where('user_id', auth()->user()->id)->where('status', 'create')->latest()->get();
    }

    public function updateTasks()
    {
        $this->tasks = Task::where('user_id', auth()->user()->id)->where('status', 'create')->latest()->get();
    }

    public function done(Task $task)
    {

        $this->confirm(__('dolist.are_you_sure'), [
            'toast' => false,
            'position' => 'center',
            'showConfirmButton' => true,
            'cancelButtonText' => __('dolist.cancel'),
            'onConfirmed' => 'confirmedDone',
            'onCancelled' => 'cancelledDone'
        ]);
        $this->task = $task;
    }

    public function confirmedDone()
    {
        $this->task->status = 'done';
        $this->task->save();
        $this->tasks = Task::where('user_id', auth()->user()->id)->where('status', 'create')->latest()->get();
        $this->alert(
            'success',
            __('dolist.done')
        );
    }

    public function cancelledDone()
    {
        $this->alert(
            'success',
            __('dolist.cancelled')
        );
    }

    public function render()
    {
        return view('livewire.dashbaord.index');
    }
}
File resources/views/livewire/dashbaord/index.blade.php (link to Github)
<div class="max-w-6xl mx-auto sm:px-6 lg:px-8 mt-4">
    <x-button primary label="{{ __('dolist.create') }}" wire:click="$emit('openModal', 'task.create')"  />
</div>
<div class="max-w-6xl mx-auto sm:px-6 lg:px-8 mt-4">
    @foreach($tasks as $task)
        <div class="mt-4 mb-4">
            <x-card title="{{ $task->title }}">
                <x-slot name="action">
                    <button wire:click="done({{ $task }})" class="rounded-full focus:outline-none focus:ring-2 focus:ring-indigo-600">
                        <x-icon name="check" class="w-4 h-4 text-gray-500" />
                    </button>
                    <button class="rounded-full focus:outline-none focus:ring-2 focus:ring-indigo-600" wire:click='$emit("openModal", "task.edit", {{ json_encode(["task" => $task->id]) }})'><x-icon name="pencil-alt" class="w-4 h-4 text-gray-500" /></button>
                </x-slot>
                {{ $task->description }}
            </x-card>
        </div>
    @endforeach
</div>

Additional resources on livewire/livewire: