Dropdown not working when we update the livewire component.

I am using Admin panel for my livewire project. I have used css and javascript files in the layout file. I have used wire:navigate to navigate between pages. It works fine unless I change the profile pic and update it in the other components like sidebar and header. It udpates the image but it make the dropdown stop working.

SIDEBAR COMPONENT

 <!-- Start::slide -->
                    @can('admin.inquiry.index')
                        <li class="slide has-sub" wire:current='active'>
                            <a href="javascript:void(0);" class="side-menu__item" wire:current='active'>
                                <svg xmlns="http://www.w3.org/2000/svg" class="side-menu__icon" viewBox="0 0 24 24">
                                    <path d="M0 0h24v24H0V0z" fill="none" />
                                    <path d="M19 5H5v14h14V5zM9 17H7v-7h2v7zm4 0h-2V7h2v10zm4 0h-2v-4h2v4z" opacity=".3" />
                                    <path
                                        d="M3 5v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2zm2 0h14v14H5V5zm2 5h2v7H7zm4-3h2v10h-2zm4 6h2v4h-2z" />
                                </svg>
                                Inquiries &nbsp; <span class="badge bg-success">{{ $allInquiriesCount }}</span></span>
                                <i class="fe fe-chevron-right side-menu__angle"></i>
                            </a>
                            <ul class="slide-menu child1">
                                <li class="slide">
                                    <a wire:navigate href="{{ route('admin.inquiry.index') }}" class="side-menu__item"
                                        wire:current='active'>
                                        All Inquiries List &nbsp;&nbsp; <span
                                            class="badge bg-secondary ms-auto menu-badge">{{ $allInquiriesCount }}</span>
                                    </a>
                                </li>
                                <li class="slide">
                                    <a wire:navigate href="{{ route('admin.inquiry.index.pending') }}" class="side-menu__item"
                                        wire:current='active'>
                                        Pending Inquiries&nbsp;&nbsp; <span
                                            class="badge bg-warning ms-auto menu-badge">{{ $pendingInquiriesCount }}</span>
                                    </a>
                                </li>
                                <li class="slide">
                                    <a wire:navigate href="{{ route('admin.inquiry.index.open') }}" class="side-menu__item"
                                        wire:current='active'>
                                        Open Inquiries &nbsp;&nbsp;
                                        <span class="badge bg-danger ms-auto menu-badge">{{ $openInquiriesCount }}</span>
                                    </a>
                                </li>
                                <li class="slide">
                                    <a wire:navigate href="{{ route('admin.inquiry.index.closed') }}" class="side-menu__item"
                                        wire:current='active'>
                                        Closed Inquiries &nbsp;&nbsp;<span
                                            class="badge bg-primary ms-auto menu-badge">{{ $closedInquiriesCount }}</span>
                                    </a>
                                </li>
                            </ul>
                        </li>
                    @endcanany
                    <!-- End::slide -->

and when I update the inquiry status from the another component count does not change rather dropdown stops working.

Why is this happening ? I am using template js and css.

    <!-- Popper JS -->
    <script src="{{ asset('assets/libs/@popperjs/core/umd/popper.min.js') }}" data-navigate-once></script>

    <!-- Bootstrap JS -->
    <script src="{{ asset('assets/libs/bootstrap/js/bootstrap.bundle.min.js') }}" data-navigate-once></script>

    <!-- Defaultmenu JS -->
    <script src="{{ asset('assets/js/defaultmenu.min.js') }}" data-navigate-once></script>

    <!-- Node Waves JS-->
    <script src="{{ asset('assets/libs/node-waves/waves.min.js') }}" data-navigate-once></script>

    <!-- Sticky JS -->
    <script src="{{ asset('assets/js/sticky.js') }}" data-navigate-once></script>

    <!-- Simplebar JS -->
    <script src="{{ asset('assets/libs/simplebar/simplebar.min.js') }}" data-navigate-once></script>
    <script src="{{ asset('assets/js/simplebar.js') }}" data-navigate-once></script>

    <!-- Color Picker JS -->
    <script src="{{ asset('assets/libs/@simonwep/pickr/pickr.es5.min.js') }}" data-navigate-once></script>

    <!-- JSVector Maps JS -->
    <script src="{{ asset('assets/libs/jsvectormap/js/jsvectormap.min.js') }}" data-navigate-once></script>

    <!-- Select2 Cdn -->
    <script src="{{ asset('assets/js/select2.min.js') }}" data-navigate-once></script>

    <!-- Custom-Switcher JS -->
    <script src="{{ asset('assets/js/custom-switcher.min.js') }}" data-navigate-once></script>
    <!-- Custom JS -->
    <script src="{{ asset('assets/js/custom.js') }}" data-navigate-once></script>
    @stack('scripts')