Переключатель выпадающего меню Bootstrap не работает в Vue Spa

Question

Я использую некоторые значения bootstrap submenu в своем заголовке и по неизвестной причине каждый раз, когда я router.push перехожу с экрана входа в систему на панель инструментов, которая затем загружает заголовок, функция bootstrap submenu или dropdown-toggle не работают ичтобы заставить это работать, я просто делаю ручное обновление в браузере.

Я не знаю почему, но ему просто нравится, что bootstrap submenu не удалось что-то сделать, потому что заголовок не загружается при создании страницы.

Так что для простоты у меня есть эта конфигурацияна моем admin.vue

<template>
<div>
    <transition 
        enter-active-class="animated fadeInDown "
        leave-active-class="animated fadeOutUp  "
        mode="out-in"
    >
        <router-view name="header"></router-view>
    </transition>

    <transition 
        enter-active-class="animated fadeIn"
        leave-active-class=""
        mode="out-in"
    >
        <router-view></router-view>
    </transition>
</div>
</template>

и на моем маршрутизаторе я делаю это для входа в систему

{ path: '/login',
  name: 'login', 
  components: { default: login },
  meta: { notLoggedIn: true }},

, а затем для остальной части страницы для аутентифицированного пользователя

{ path: '/',
  name: 'dashboard', 
  components: { default: dashboard,'header': header },
  meta: { requiresAuth: true }},

и вот часть моего всего заголовка

<li class="nav-item dropdown">
    <a href="#" class="navbar-nav-link dropdown-toggle" data-toggle="dropdown">
        <i class="icon-gear mr-2"></i>
        System
    </a>

    <div class="dropdown-menu">

        <router-link :to="{ name:'userCreate' }" class="dropdown-item" active-class="active" exact v-if="currentUser.can && currentUser.can['create_user']">
            <i class="icon-plus22"></i> Add User
        </router-link>

        <!-- divider -->
        <div class="dropdown-divider"></div> 

        <!-- user -->
        <!-- if board account -->
        <div class="dropdown-submenu" v-show="currentUser.can && currentUser.can['index_user'] && currentUser.id_company == 0">
            <a href="#" class="dropdown-item dropdown-toggle">
                <i class="icon-users"></i> User
            </a>
            <div class="dropdown-menu">

                <router-link :to="{ name: 'userCompany', params:{company:'all'} }" class="dropdown-item" active-class="active" exact >
                    All Company
                </router-link>
                <router-link :to="{ name: 'userCompany', params:{company: currentUser.id_company} }" class="dropdown-item" active-class="active" exact>
                    Board
                </router-link>

                <!-- divider -->
                <div class="dropdown-divider"></div> 

                <template v-for="company in modelCompany">
                    <router-link :to="{ name: 'userCompany', params:{company: company.id} }" class="dropdown-item" active-class="active" exact>
                     {{ company.name }}
                    </router-link>
                </template>

            </div>
        </div>

        <!-- if company account -->
        <router-link :to="{ name: 'userCompany', params:{cu: currentUser.id_company} }" class="dropdown-item" active-class="active" exact v-if="currentUser.can && currentUser.can['index_user'] && currentUser.id_company != 0">
            <i class="icon-users"></i> User
        </router-link>

    </div>
</li>

сначала, я думаю, потому что я делаю что-то не так с v-for деталью, поэтому я удаляю их и просто покидаю всю компанию и советесть ссылка на маршрутизатор, но проблема все еще та же

, а затем следующая, я думаю, из-за

v-show="currentUser.can && currentUser.can['index_user'] && currentUser.id_company == 0"

в классе подменю div, так что для теста я удалил это такпросто простое выпадающее подменю, и оно все еще имеет ту же проблему ... так что теперь у меня есть только один подозреваемый ... это потому, что добавление компонента заголовка после входа в систему является виновником ...

, так что любой имеетидея как это исправить?может быть, есть какая-то команда javascript для bootstrap 4, которая указывает выпадающему меню сбросить или перерисовать все правильно?

или, возможно, неправильный способ добавления компонента заголовка?