Menu controller 'open' automatically routing back to home page


Unsure if this is a bug, but hopefully someone can help.

I have the side menu and router outlet in my App.vue file.

<ion-app class="scanner-hide">
	<ion-router-outlet id="main-content" animated="true" />

This is part of my side menu code…

<ion-menu menu-id="app-menu" content-id="main-content" side="end" type="push" swipeGesture="true">
  my content here

I then have a component called ‘Header’ which includes my title for the page along with the side menu button.

This component controls the opening of the side menu, which is just a method as shown below

openMenu() {

I have a layout component that imports the header component. This layout component is used throughout the app.

  <main-header :name="name"/>
  <slot name="content"></slot>
  <ion-footer class="ion-no-border footer">
      <div class="button-container">
          <slot name="footer"></slot>

So that is my structure and hope that makes sense.

If i click the menu button in the below picture(this is my root page), it opens fine.

If i open the side menu from any other page (example below), the side menu does open but the app automatically navigates back to the root page

Adding in versions etc

"dependencies": {
    "@capacitor-community/barcode-scanner": "^2.1.0",
    "@capacitor/android": "^3.4.2",
    "@capacitor/core": "^3.4.2",
    "@capacitor/haptics": "^1.1.4",
    "@capacitor/ios": "^3.4.2",
    "@capacitor/network": "^1.0.7",
    "@ionic/vue": "^6.1.4",
    "@ionic/vue-router": "^6.1.4",
    "acorn": "^8.7.0",
    "axios": "^0.21.4",
    "core-js": "^3.6.5",
    "moment": "^2.29.1",
    "vue": "^3.2.26",
    "vue-router": "^4.0.12",
    "vuex": "^4.0.0"