Как применить стили vue после стилей страницы?

Question

[Amogus )-]

Я только начал разбираться в vue. У router-link есть нативный router-link-exact-active, она задана в конце тега style в фале vue. Когда я тексту меню задаю цвет по-умолчанию, подсветка текущей страницы не работает и цвет заменяется заданным, а если я цвет не задаю все работает.
Вот мой код менюшки:

<template>
  <div class="menu">
    <div class="nav">
      <a href="#" class="logo-btn"><img src="../assets/logo.png" class="logo-img"></a>
      <div class="nav-btn-wrapper"><router-link to="/" class="nav-btn"><p class="nav-btn-text">Home</p></router-link></div>
      <div class="nav-btn-wrapper"><router-link to="/about" class="nav-btn"><p class="nav-btn-text">About</p></router-link></div>
      <div class="nav-btn-wrapper"><router-link to="/start" class="nav-btn"><p class="nav-btn-text">Get started</p></router-link></div>
      <div class="nav-btn-wrapper"><router-link to="/downloads" class="nav-btn"><p class="nav-btn-text">Downloads</p></router-link></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Menu',
  props: {
    current_page: String
  }
}

</script>

<style scoped>
.menu {
  display: flex;
  background: #2c3e50;

  width: auto;
  height: 60px;
}

.nav-btn-wrapper {
  width: auto;
  height: 100%;
}

.nav-btn {
  display: flex;

  width: 100%;
  height: 100%;

  text-decoration: none;
}

.nav-btn-text {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100%;

  padding-left: 10px;
  padding-right: 10px;

  font-size: 20px;
  font-weight: bold;

  color: azure;

  -webkit-transition: linear 0.1s;
  transition: linear 0.1s;
}

.logo-img {
  height: 100%;
}

.logo-btn {

  width: 20%;
  height: 100%;
}

.nav-btn-wrapper :hover {
  background: #4c4c4c;

  -webkit-animation: linear 0.1s;
  transition: linear 0.1s;
}

.router-link-exact-active {
  color: #42b983;
}
</style>

Как мне сделать нормальную посветку текущей страницы? Есть вариант как-то подгружать стили vue после?