Tengo un problema con el menú desplegable de bootstrap con el enrutador Vue. De alguna manera, el menú desplegable no se expande al hacer clic en él. Actualmente estoy trabajando en Vuejs e intento crear una barra de navegación que contenga un menú desplegable de bootstrap.

Mi aplicación.vue:

 <template> <div> <!-- Nav bar --> <nav class="navbar navbar-expand navbar-light bg-light"> <div class="container"> <ul class="nav navbar-nav mr-auto" > <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Event Actions </a> <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <router-link class="dropdown-item" to="/CreatEvent">Create an event</router-link> <router-link class="dropdown-item" to="/ViewEvent">View events</router-link> <router-link class="dropdown-item" to="/EditEvent">Update an event</router-link> </div> </li> </ul> </div> </nav> <!-- Router view --> <div class="container mt-5"> <router-view></router-view> </div> </div> </template>