I have a problem with the dropdown menu from bootstrap with the Vue router. Somehow, the dropdown does not expand when clicking into it. I'm currently working on Vuejs and trying to create a navbar that contains a dropdown menu from bootstrap.

My App.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>