Menu Button stops working on back

So I was trying to use the ionic menu to simplify my work and at first I thought everything was okay but I found that when I navigate out of a page and then back to it the button to open the menu just stops working.
Any idea why?

Please share some code, and make sure you use the code formatting with triple back ticks:

Code goes here
<template>
  <ion-header :translucent="true">
    <ion-toolbar>
      <div class="header">
        <div class="left-toolbar">
          <ion-buttons slot="start">
            <ion-menu-button></ion-menu-button>
          </ion-buttons>
        </div>
        <div @click="() => router.push('/profile')" class="right-toolbar">
          <ion-icon :icon="person"></ion-icon>
        </div>
      </div>
    </ion-toolbar>
  </ion-header>
  <div class="menu">
    <ion-header>
      <ion-toolbar>
        <ion-title class="ion-text-center">Menu</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content class="menu-pages">
      <ion-list>
        <ion-item>
          <ion-button @click="router.push('/home')" class="button-native">
            Home
          </ion-button>
        </ion-item>
        <ion-item>
          <ion-button @click="router.push('/profile')" class="button-native">
            Profile
          </ion-button>
        </ion-item>
        <ion-item>
          <ion-button @click="router.push('/myreadlists')" class="button-native">
            Collections
          </ion-button>
        </ion-item>
        <ion-item>
          <ion-button @click="router.push('/reserved')" class="button-native">
            Reserved Books
          </ion-button>
        </ion-item>
      </ion-list>
    </ion-content>
  </div>

</template>
  
<script lang="ts">
import {
  IonContent,
  IonHeader,
  IonTitle,
  IonToolbar,
  IonList,
  IonItem,
  IonButton,
} from '@ionic/vue';
import { defineComponent } from 'vue';
import { useRouter } from 'vue-router';
import { person } from "ionicons/icons"


export default defineComponent({
  name: 'MenuComponent',
  components: {
    IonContent,
    IonHeader,
    IonTitle,
    IonToolbar,
    IonList,
    IonItem,
    IonButton,
  },

  setup() {
    const router = useRouter();
    return { router, person };
  },
});
</script>

<style scoped>
ion-icon {
  font-size: 50px;
}

.menu-pages {
  pointer-events: all;
}
</style>

This is my menu component, on my App.Vue I define the ion-router-outlet with id=“main-component”