V-drawer-tab content not visible in internal pages

[Malfunction13]

Hi community,

I am not sure if this is a bug or I am doing something wrong so decided to ask here first before creating a bug report.
Hopefully you can help me!

Use case:
I have a v-app-bar component that is passed to a parent Header component. The header component is injected to individual page components and conditionally renders different icons and buttons depending on the page.
The hamburger button toggles a v-navigation-drawer sidebar menu, implemented as the documentation suggests.
The navigation drawer with a v-for loop creates v-expansion panels that hold inside them v-list of items that serve as links to the product list page and on-click redirects with query params. Sort of nested menu with sub-menu items.

The problem:
The v-navigation-drawer has content ONLY on the index page OR when the internal pages are accessed via the drawer links from the menu options of the drawer from homepage.
If the page is accessed by typing the URL in the address bar of the browser OR via a redirect from any other navigation item, such as a button outside of the header menu, the drawer items are empty.

Probably important details:

• The list of items that populate the drawer is fetched from vueX
• Tested in Opera/Firefox/Chrome - the results do not differ - the nav drawer when toggled doesnt have any content

Debugging amazement:
I tried adding a plain

test

inside the nav drawer and it was visualized, however anything that is generated dynamically doesn't work.
If instead of fetching from the vueX store the computed prop passes dummy data, it works. So somehow the same component cannot consistently fetch from store when passed to other components. And the difference comes from the way the user is being redirected to other pages.

I have been tinkering around this for quite some time and the only viable suspicion left is towards the storage and potential issues in loading data from it when accessing non-index pages.

Below is the code of the component

<template>
 <div>
  <v-app-bar
    color="dark"
    dense
    dark
  >
    <v-app-bar-nav-icon @click.stop="categoriesMenu = !categoriesMenu" />
    <v-toolbar-title>APPLICATION</v-toolbar-title>

    <v-spacer></v-spacer>

    <v-btn icon>
      <v-icon>mdi-heart</v-icon>
    </v-btn>

    <v-btn icon>
      <v-icon>mdi-magnify</v-icon>
    </v-btn>

    <v-menu
        left
    >
      <template v-slot:activator="{ on, attrs }">
        <v-btn
            icon
            v-bind="attrs"
            v-on="on"
        >
          <v-icon>mdi-dots-vertical</v-icon>
        </v-btn>
      </template>

      <v-list>
        <v-list-item
            v-for="n in 5"
            :key="n"
            @click="() => {}"
        >
          <v-list-item-title>Option {{ n }}</v-list-item-title>
        </v-list-item>
      </v-list>
    </v-menu>
  </v-app-bar>
  <v-navigation-drawer
      v-model="categoriesMenu"
      absolute
      temporary
      clipped
      app
  >
    <v-expansion-panels accordion>
      <v-expansion-panel
          v-for="category in categories"
          :key="category.id"
          focusable
      >
        <v-expansion-panel-header>
          {{ $t(category.name) }}
          <template v-slot:actions>
            <v-icon color="primary">
              mdi-arrow-down-drop-circle-outline
            </v-icon>
          </template>
        </v-expansion-panel-header>
        <v-expansion-panel-content>
          <v-list nav dense>
            <v-list-item
              class="hover-accent"
              v-for="subcategory in category.subcategories" :key="subcategory.name+subcategory.id"
              @click="$router.push({path: '/courses', query: { 'subcategory_id': subcategory.id, 'category_id': category.id}})">
              <v-list-item-title>
                {{ $t(subcategory.name)}}
              </v-list-item-title>
            </v-list-item>

          </v-list>
        </v-expansion-panel-content>
      </v-expansion-panel>
    </v-expansion-panels>
  </v-navigation-drawer>
</div>
</template>
<script>
export default {
  data() {
    return {
      categoriesMenu: false,
      group: null,
    }
  },
  computed: {
    categories() {
      return this.$store.state.categories || [];
    }
  }
}
</script>````