Hello everybody. I use Vue. I need help, my links in my drop down list is not working. I put my code attached.

<template>
  <div class="item">
    <mdb-navbar color="white" class="bg-white" light>
      <mdb-navbar-brand>
        <img src="../../assets/logo.png" alt="logo" />
      </mdb-navbar-brand>
      <mdb-navbar-toggler class="text-left text-light">

        <mdb-navbar-nav class="p-2">

          <mdb-dropdown tag="li" class="nav-item mr-5 ">
            <mdb-dropdown-toggle
              tag="a"
              navLink
              color="white"
              slot="toggle"
              waves-fixed
              >Action</mdb-dropdown-toggle
            >
            <mdb-dropdown-menu>
              <mdb-dropdown-item>
                <router-link class="link" to="about">
                  Something
                </router-link>
              </mdb-dropdown-item>

            </mdb-dropdown-menu>
          </mdb-dropdown>

            <mdb-dropdown tag="li" class="nav-item mr-5 ">
                <mdb-dropdown-toggle
                        tag="a"
                        navLink
                        color="white"
                        slot="toggle"
                        waves-fixed
                >Action 2</mdb-dropdown-toggle
                >
                <mdb-dropdown-menu>
                    <mdb-dropdown-item>
                        <router-link  to="about">
                            Something 2
                        </router-link>
                    </mdb-dropdown-item>

                </mdb-dropdown-menu>
            </mdb-dropdown>

        </mdb-navbar-nav>

        <mdb-dropdown tag="li" class="nav-item mr-5">
          <mdb-dropdown-toggle tag="a" navLink color="stylish" slot="toggle">
            <img
              src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQi9FyU2yckcL_6zoDhbTlsuHGv5m0jlxJ3v_I4Sd9oyVkBH9oY&usqp=CAU"
              class="rounded-square z-depth-0"
              alt="avatar image"
              height="35"
            />
          </mdb-dropdown-toggle>
          <mdb-dropdown-menu right>
            <mdb-dropdown-item>Logout</mdb-dropdown-item>
            <mdb-dropdown-item>Edit profile</mdb-dropdown-item>
          </mdb-dropdown-menu>
        </mdb-dropdown>
      </mdb-navbar-toggler>
    </mdb-navbar>
  </div>
</template>
<script>
import {
  mdbNavbar,
  mdbNavbarBrand,
  mdbNavbarToggler,
  mdbNavbarNav,
  mdbDropdown,
  mdbDropdownMenu,
  mdbDropdownToggle,
  mdbDropdownItem
} from "mdbvue";
export default {
  name: "NavBar",
  components: {
    mdbNavbar,
    mdbNavbarBrand,
    mdbNavbarToggler,
    mdbNavbarNav,
    mdbDropdown,
    mdbDropdownMenu,
    mdbDropdownToggle,
    mdbDropdownItem
  }
};
</script>
<style scoped>
@import "../../../node_modules/mdbvue/lib/css/mdb.min.css";
hr {
  margin-top: 3%;
}

.link:hover {
  background-color: lightgreen !important ;
  border-radius: 3px 3px 3px 3px;
  width: 100%;
}
</style>