Changing Search Input Field Does not Update Rendered Items on Screen

What seems to be the problem: Trying to use a where clause in the render function and expecting it to update when the user types in the search input field, but always getting all the rows from my table. It is never actually returning my search results. I believe I am following exactly as this is outlined in the Livewire documentation.

Are you using the latest version of Livewire: Yes

Do you have any screenshots or code examples:

View calling Livewire component:

<x-slot name="header">
    <h2 class="font-semibold text-xl text-gray-800 leading-tight">

<div class="py-12">
    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
        <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">
            <div class="bg-white border-b border-gray-200">


PHP Code:


namespace App\Http\Livewire\Leads;

use App\Models\Lead;
use Livewire\Component;
use Livewire\WithPagination;

class LeadIndex extends Component
    use WithPagination;

    public $search;
    protected $queryString = ['search'];

    public function mount() {

    public function updatedSearch() {

    public function render()
        return view('leads.lead-index', [
            'leads' => Lead::where('first_name', 'like', '%' . $this->search . '%')->get(),

Livewire Component View:

<div class="flex items-center justify-between px-4 py-4">
    <div class="flex items-center space-x-2">
        <input type="text" class="rounded-md border border-gray-200 bg-gray-100 placeholder-gray-600 w-72 px-3 py-2 text-sm text-black leading-tight focus:outline-none focus:border-gray-500" id="search" placeholder="Search..." wire:model="search" />

        <div class="relative">
            <select class="block appearance-none w-full bg-gray-100 border border-gray-200 text-gray-600 text-sm py-2 px-3 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500" id="domain">
                <option>Select a Landing Page...</option>

            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
                <svg class="fill-current h-4 w-4" xmlns="" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
    <div class="flex items-end space-x-2">
        <button class="border border-gray-400 rounded px-3 pt-1 pb-2 hover:bg-gray-200 flex items-center space-x-1 text-sm">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns=""><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path></svg>
            <div class="pt-1">Export</div>

<div class="border-t border-b border-gray-400 text-gray-700 divide-y divide-gray-400">
    <div class="flex justify-between px-4 py-2 font-semibold bg-blue-200 text-black">
        <div class="w-2/12">Full Name</div>
        <div class="w-3/12">Email</div>
        <div class="w-2/12">Mobile Phone</div>
        <div class="w-2/12">Organization</div>
        <div class="w-2/12 text-center">reCAPTCHA Score</div>
        <div class="w-1/12"></div>
    @foreach($leads as $lead)
    <div class="flex justify-between px-4 py-2 text-black text-sm">
        <div class="w-2/12">{{ $lead->full_name }}</div>
        <div class="w-3/12">{{ $lead->email }}</div>
        <div class="w-2/12">{{ $lead->phone }}</div>
        <div class="w-2/12">{{ $lead->organization }}</div>
        <div class="w-2/12 text-center">{{ $lead->recaptcha_score }}</div>
        <div class="w-1/12"></div>

<div class="px-4 py-2 bg-blue-50">
    {{-- $leads->links() --}}

Ok, I found my issue and it is working as expected now. Hopefully this will help someone else in the future. You can see above in my example that I have multiple HTML elements at the “root” level within my Livewire component. I must have missed this in the documentation, but it appears you need to make sure your entire Livewire component is wrapped in a single master HTML element. Once I wrapped everything in the above component in a single DIV, it worked as expected.