Bootstrap 5 Dropdown Arrow displays incorrectly when the page is refreshed or accessed for the first time

I have a Bootstrap 5 dropdown menu using Vue.js and Nuxt.js :

<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
              <ul class="navbar-nav mb-2 mb-lg-0">
                <li class="nav-item">
                  <a class="nav-link" aria-current="page" href="/">Home</a>
                </li>

                <!--Dropdown-->
                <li class="nav-item dropdown">
                  <a
                    class="nav-link "
                    href="#"
                    role="button"
                    data-bs-toggle="dropdown"
                    aria-expanded="false"
                  >
                    Dropdown1
                    <font-awesome-icon :icon="['fas', 'sort-down']" size="xs" class="move-up" />

                  </a>
                  <ul class="dropdown-menu">                
                    <li><a class="dropdown-item" href="#">Dropdown-items</a></li>
                    <li><hr class="dropdown-divider" /></li>
                    <li><a class="dropdown-item" href="#">Dropdown-items</a></li>
                    <li><hr class="dropdown-divider" /></li>
                    <li><a class="dropdown-item" href="#">Dropdown-items</a></li>
                  </ul>
                </li>
                <!--Dropdown-->

                <!--Dropdown-->
                <li class="nav-item dropdown">
                  <a
                    class="nav-link "
                    href="#"
                    role="button"
                    data-bs-toggle="dropdown"
                    aria-expanded="false"
                  >
                    Dropdown2
                    <font-awesome-icon :icon="['fas', 'sort-down']" size="xs" class="move-up" />

                  </a>
                  <ul class="dropdown-menu">                
                    <li><a class="dropdown-item" href="#">Dropdown-items</a></li>
                    <li><hr class="dropdown-divider" /></li>
                    <li><a class="dropdown-item" href="#">Dropdown-items</a></li>
                    <li><hr class="dropdown-divider" /></li>
                    <li><a class="dropdown-item" href="#">Dropdown-items</a></li>
                  </ul>
                </li>
                <!--Dropdown-->
                          

              </ul>

            </div>

For the Bootstrap Nav Bar dropdown menu, it will display a downward arrow when the page is refreshed or accessed for the first time. After a while, the arrow will be gone.

This arrow will also cause my dropdown-toggle to shift upwards when the arrows displayed.

Navbar capture 1:

refreshed or accessed for the first time

Navbar capture 2:

after a while

I tried to hide the arrow using CSS like this, but it did not work:

.navbar .dropdown-toggle::after { 
    display: none; 
}

I found that if I add “<ClientOnly>” for the nav bar, it does not have this problem.
However, it is not a good solution to render content exclusively on the client side, as it makes the nav bar display slower than the content on the pages.

Thanks for help.