<x-custom-select name="basic-usage-demo" 
                 :options="['foo', 'bar']"
/>

<x-custom-select name="model-options-demo"
                 :options="\App\Models\Role::get()"
                 value-field="id"
                 text-field="name"
/>

<x-custom-select name="optional-demo"
                 :options="\App\Models\Role::get()"
                 value-field="id"
                 text-field="name"
                 optional
/>

<x-custom-select name="multiple-demo"
                 :options="\App\Models\Role::get()"
                 value-field="id"
                 text-field="name"
                 optional
                 multiple
/>

Livewire Component Class:

<?php

declare(strict_types=1);

namespace App\Http\Livewire;

use App\Models\Role;
use App\Models\User;
use Livewire\Component;

final class DependantCustomSelects extends Component
{
    public $roles;
    public $users;

    public $roleId;
    public $userId;

    public $selectedUser;

    public function updatedRoleId($id): void
    {
        $this->users = User::where('role_id', $id)->get();
        $this->reset('userId', 'selectedUser');

        $this->emitSelf('users-updated', $this->users);
    }

    public function updatedUserId($id): void
    {
        $this->selectedUser = $this->users->where('id', $id)->first();
    }

    public function mount(): void
    {
        $this->roles = Role::all();
        $this->roleId = $this->roles->first()->id;

        $this->users = User::where('role_id', $this->roleId)->get();
    }
}

Livewire Component Markup:

<div>
    <x-form-group name="roleId" label="Role">
        <x-custom-select wire:model="roleId"
                         :options="$roles"
                         value-field="id"
                         text-field="name"
        />
    </x-form-group>

    <x-form-group name="userId" label="User">
        <x-custom-select wire:model="userId"
                         :options="$users"
                         value-field="id"
                         text-field="name"
                         optional
                         :wire-listeners="['users-updated']"
        />
    </x-form-group>

    <p class="text-sm text-blue-gray-500">User options will change depending on which role is selected.</p>

    <hr class="my-4">

    <div>
        <p class="text-sm text-blue-gray-600">
            @if ($selectedUser)
                <span class="block">Selected User:</span>
                <pre class="text-xs block mt-2 text-blue-gray-600">{!! json_encode($selectedUser, JSON_PRETTY_PRINT) !!}</pre>
            @else
                Selected User: No user selected
            @endif
        </p>
    </div>
</div>