Livewire rendering scripts

Hey artisans

I'v an issue with livewire , my scripts are no more working when I livewire repopulate the dom

I've tried both wire:ignore and events

The dropdown button is not working!

this is the code

ShowCountries component

<?php

namespace App\Http\Livewire;

use App\Modules\Country\Models\Country;
use Livewire\Component;
use Livewire\WithPagination;

class ShowCountries extends Component
{
    use WithPagination;

    public $sortBy = 'name';

    public $sortDirection = 'asc';
    public $perPage = 10;
    public $search = '';
    protected $paginationTheme = 'bootstrap';
    public function render()
    {
        $countries = Country::query()
            ->search($this->search)
            ->orderBy($this->sortBy, $this->sortDirection)
            ->paginate($this->perPage);

        return view('livewire.show-countries', [
            'countries' => $countries,
        ]);
    }

    public function sortBy($field)
    {
        if ($this->sortDirection == 'asc') {
            $this->sortDirection = 'desc';
        } else {
            $this->sortDirection = 'asc';
        }

        return $this->sortBy = $field;
    }

    public function updatingSearch()
    {
        
       
        $this->render();
        $this->dispatchBrowserEvent('dropdownEvent');
        
    }

}

show-countries view

<div>
   <div class="card">
      <div class="card-body">
         <div class="row mb-4">
          
            <div class="col">
               <input wire:model.debounce.300ms="search" class="form-control" type="text"
                  placeholder="Search Countries...">
            </div>
         </div>
         <table class="table  table-bordered table-hover" style="width:100%">
            <thead>
               <tr>
                  <th wire:click="sortBy('name')" style="cursor: pointer;">
                     Name
                  </th>
                  <th wire:click="sortBy('created_at')" style="cursor: pointer;">
                     Created_at
                  </th>
                  <th style="width:  8.33%">
                  </th>
               </tr>
            </thead>
            <tbody>
               @foreach ($countries as $country)
               <tr>
                  <td>{{ucfirst($country->name)}}</td>
                  <td>{{$country->created_at}}</td>
                  <td >
                     <div class="dropdown d-flex justify-content-center" >
                        <a href="" class="text-darl" id="dropdownMenuButton" data-toggle="dropdown"
                           aria-haspopup="true" aria-expanded="false" style="color:black;">
                        <i class="fas fa-ellipsis-h text-black"></i> </a>
                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                        
                           <a class="dropdown-item" href="#" data-toggle="modal" data-target="#exampleModal{{$country->id}}"
                              >Delete</a>
                        </div>
                     </div>
                  </td>
               </tr>
               <!-- Modal -->
               <div class="modal fade" id="exampleModal{{$country->id}}" tabindex="-1" role="dialog"
                  aria-labelledby="exampleModalLabel" aria-hidden="true"  >
                  <div class="modal-dialog" role="document">
                     <div class="modal-content">
                        <div class="modal-header">
                           <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                           <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                           <span aria-hidden="true">&times;</span>
                           </button>
                        </div>
                        <div class="modal-body">
                           {{$country->name}}
                        </div>
                        <div class="modal-footer">
                           <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                           <button type="button" class="btn btn-primary">Save changes</button>
                        </div>
                     </div>
                  </div>
               </div>
               @endforeach
            </tbody>
         </table>
         <div>
            <p class="mt-4">
               Showing {{$countries->firstItem()}} to {{$countries->lastItem()}} out of {{$countries->total()}}
               countries
            </p>
            <div class="d-flex justify-content-center">
               {{$countries->links()}}
            </div>
         </div>
      </div>
   </div>
</div>

Event fired after searching an element

@push('scripts')
<script>
 window.addEventListener('dropdownEvent', event => {

  $('.dropdown-toggle').dropdown()

})
   

</script>
@endpush