Vuetify v-menu not expanding when component changes (Vue router)

Question

I have a Vuetify v-menu on my App.vue, which appears on every page. When loading a page for the first time, it correctly expands (the menu is used for options such as Sign Out, Account Settings etc). When I navigate to another component (using Vue router), the v-menu does not expand when the new page is loaded. It doesn't work even if I click it (not just hover). What could be the cause of this?

...

<div v-if="signedIn" class="text-center hideOnMobile">
  <v-menu
    open-on-hover
    bottom
    offset-y
  >
    <template v-slot:activator="{ on, attrs }">
      <v-btn
        elevation='0'
        color="primary"
        dark
        v-bind="attrs"
        v-on="on"
        class="userDropDown"
      >
        &nbsp;{{ username }} &nbsp;
        <v-icon dark left>mdi-chevron-down</v-icon>
      </v-btn>
    </template>

    <v-list>
      <v-list-item
        v-for="(item, index) in items"
        @click="selectSection(item.title)"
        :key="index"
      >
        <v-list-item-title>{{ item.title }}</v-list-item-title>
      </v-list-item>
    </v-list>
  </v-menu>
</div>

...

<router-view :uid='this.uid' :username='this.username' :userData='this.userData'></router-view>