title: UI not updating for simple Livewire component
body: <p>I have a small livewire component that searches for users.  The backend appears to work correctly, and if I print out the results from the query, the users returned functions correctly.</p>
  <p>In the UI, however, any user that appears in the dropdown will stay, even if the record is no longer present in <code>$this-&gt;users</code>.</p>
  <p>It appears that part of the DOM is not redrawing when the results are returned.  The component is below.</p>
  <p><strong>UserSearch.php</strong></p>
  <pre><code>namespace App\Http\Livewire\Utilities;
  
  use App\Models\Team;
  use App\Models\User;
  use Livewire\Component;
  
  class UserSearch extends Component
  {
      public $user;
      public $search;
      public $users = [];
  
      public function mount() {
          $this-&gt;user = auth()-&gt;user();
      }
  
      public function selectUser($user) {
          $this-&gt;emit('userSelected', $user);
      }
  
      public function updatedSearch($needle) {
          $this-&gt;users = User::teamUsers()-&gt;where('name','LIKE',&quot;%$needle%&quot;)-&gt;get();
      }
  
  
      public function render()
      {
          return view('livewire.utilities.user-search',[
              'users' =&gt; $this-&gt;users
          ]);
      }
  }
  </code></pre>
  <p><strong>user-search.blade.php</strong></p>
  <pre><code>&lt;div&gt;
      &lt;label for=&quot;combobox&quot; class=&quot;block text-sm font-medium text-gray-700&quot;&gt;Assigned to&lt;/label&gt;
      &lt;div class=&quot;relative mt-1&quot;&gt;
          &lt;input id=&quot;combobox&quot; type=&quot;text&quot; class=&quot;w-full rounded-md border border-gray-300 bg-white py-2 pl-3 pr-12 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm&quot; role=&quot;combobox&quot; aria-controls=&quot;options&quot; aria-expanded=&quot;false&quot; wire:model=&quot;search&quot;&gt;
          &lt;button type=&quot;button&quot; class=&quot;absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-none&quot;&gt;
              &lt;!-- Heroicon name: solid/selector --&gt;
              &lt;svg class=&quot;h-5 w-5 text-gray-400&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 20 20&quot; fill=&quot;currentColor&quot; aria-hidden=&quot;true&quot;&gt;
                  &lt;path fill-rule=&quot;evenodd&quot; d=&quot;M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z&quot; clip-rule=&quot;evenodd&quot; /&gt;
              &lt;/svg&gt;
          &lt;/button&gt;
  
  
          &lt;ul class=&quot;absolute z-10 mt-1 max-h-56 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm&quot; id=&quot;options&quot; role=&quot;listbox&quot;&gt;
              &lt;!--
                Combobox option, manage highlight styles based on mouseenter/mouseleave and keyboard navigation.
  
                Active: &quot;text-white bg-indigo-600&quot;, Not Active: &quot;text-gray-900&quot;
              --&gt;
                  @foreach($users as $user)
                      &lt;li class=&quot;relative cursor-default select-none py-2 pl-3 pr-9 text-gray-900 cursor-pointer&quot; id=&quot;option-0&quot; role=&quot;option&quot; tabindex=&quot;-1&quot; wire:click=&quot;selectUser({{$user}})&quot;&gt;
                              &lt;div class=&quot;flex&quot;&gt;
                                  &lt;!-- Selected: &quot;font-semibold&quot; --&gt;
                                  &lt;span class=&quot;truncate&quot;&gt;{{$user-&gt;name}}&lt;/span&gt;
                                  &lt;!-- Active: &quot;text-indigo-200&quot;, Not Active: &quot;text-gray-500&quot; --&gt;
                                  &lt;span class=&quot;ml-2 truncate text-gray-500&quot;&gt;{{$user-&gt;email}}&lt;/span&gt;
                              &lt;/div&gt;
  
                              &lt;!--
                                Checkmark, only display for selected option.
  
                                Active: &quot;text-white&quot;, Not Active: &quot;text-indigo-600&quot;
                              --&gt;
                              &lt;span class=&quot;absolute inset-y-0 right-0 flex items-center pr-4 text-indigo-600&quot;&gt;
                    &lt;!-- Heroicon name: solid/check --&gt;
                            &lt;svg class=&quot;h-5 w-5&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 20 20&quot; fill=&quot;currentColor&quot; aria-hidden=&quot;true&quot;&gt;
                              &lt;path fill-rule=&quot;evenodd&quot; d=&quot;M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z&quot; clip-rule=&quot;evenodd&quot; /&gt;
                            &lt;/svg&gt;
                          &lt;/span&gt;
                      &lt;/li&gt;
                  @endforeach
  
              &lt;!-- More items... --&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>