title: Why Laravel-livewire 'wire:model' not working?
body: <p>I am using Laravel 8.</p>
  <p>My Livewire Controller</p>
  <pre><code>&lt;?php
  
  namespace App\Http\Livewire;
  
  use Livewire\Component;
  
  class SearchDropdown extends Component
  {
      public $search = 'hello there';
      public function render()
      {
          return view('livewire.search-dropdown');
      }
  }
  </code></pre>
  <p>Livewire blade</p>
  <pre><code>&lt;div class=&quot;relative mt-3 md:mt-0&quot;&gt;
      &lt;input wire:model=&quot;search&quot; type=&quot;text&quot; class=&quot;bg-gray-800 text-sm rounded-full w-64 px-4 pl-8 py-1 focus:outline-none focus:shadow-outline&quot; placeholder=&quot;Search&quot;&gt;
      &lt;div class=&quot;absolute top-0&quot;&gt;
          &lt;svg class=&quot;fill-current w-4 text-gray-500 mt-2 ml-2&quot; viewBox=&quot;0 0 24 24&quot;&gt;&lt;path class=&quot;heroicon-ui&quot; d=&quot;M16.32 14.9l5.39 5.4a1 1 0 01-1.42 1.4l-5.38-5.38a8 8 0 111.41-1.41zM10 16a6 6 0 100-12 6 6 0 000 12z&quot;/&gt;&lt;/svg&gt;
      &lt;/div&gt;
      &lt;div class=&quot;absolute text-sm bg-gray-800 rounded w-64 mt-4&quot;&gt;
          &lt;ul&gt;
              &lt;li class=&quot;border-b border-gray-700&quot;&gt;
                  &lt;a href=&quot;#&quot; class=&quot;block hover:bg-gray-700 px-3 py-3&quot;&gt;{{ $search }}&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class=&quot;border-b border-gray-700&quot;&gt;
                  &lt;a href=&quot;#&quot; class=&quot;block hover:bg-gray-700 px-3 py-3&quot;&gt;Avengers&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class=&quot;border-b border-gray-700&quot;&gt;
                  &lt;a href=&quot;#&quot; class=&quot;block hover:bg-gray-700 px-3 py-3&quot;&gt;Avengers&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>I have included Livewire in my main.blade file</p>
  <pre><code>&lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
      &lt;title&gt;Movie App&lt;/title&gt;
  
      &lt;link rel=&quot;stylesheet&quot; href=&quot;{{ URL::asset('/css/main.css') }}&quot;&gt;
      &lt;livewire:styles /&gt;
  &lt;/head&gt;
  </code></pre>
  <p>And this before the end of the body</p>
  <pre><code>&lt;livewire:scripts /&gt;
  </code></pre>
  <p>Now when  I write something in my searchbox, it should have updated as i write, but it's not updating instead showing &quot;hello there&quot; - initial value of the $search variable.</p>
  <p>P.S :
  This is what its showing in my browser. For some reason livewire.js is getting error. How to fix this?
  <a href="https://i.stack.imgur.com/2gIe2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2gIe2.png" alt="" /></a></p>