Experiment loading livewire component from gist

email-validation.blade.php

<div>
    <label for="email" class="block text-sm font-medium leading-5 text-gray-700">
        Email address
    </label>
    <div class="mt-1 rounded-md shadow-sm">
        <input wire:model="email" id="email" type="email" required autofocus class="@error('email') border-red-500 @enderror appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 transition duration-150 ease-in-out sm:text-sm sm:leading-5" />
    </div>
    @error('email') <div class="mt-1 text-red-500 text-sm">{{ $message }}</div> @enderror
</div>

EmailValidation.php

public $email;

 public function updated($name)
{
    $this->validateOnly($name, [
        'email' => 'required|email',
    ]);
}

manifest

[
  'root' => 'Root.php',
  'email-validation' => 'EmailValidation.php',
]

root.blade.php

<div>
    <h2>{{ $message }}</h2>
    <livewire:email-validation />
</div>

Root.php

Root extends Component {
  public $message = "This is the root componenent. Below you see a nested component. All loaded from Gist!"
}