Using toolbar with menu as a component


This is my first Vue/ Ionic project and I am having trouble reusing a component that wraps a toolbar with a back button and a menu-button that toggles a menu. I want to use that component on all of my views except the login/signup page. So I thought it makes sense to create a component instead of redefining the menu every time. It takes props for the title and a boolean to decide whether or not a back button should be shown. The component works totally fine but if I use the menu to navigate to another page and use the back button the whole menu-button stops working and the menu is not able to toggle until I refresh.
Is there a best practice to use a toolbar with a menu through your whole application without repeating yourself or am I doing something wrong?

    <ion-menu side="end" content-id="main-content">

    <div id="main-content">
          <ion-buttons slot="start" v-if="hasBackButton">
            <ion-back-button default-href="/home"></ion-back-button>
          <ion-title>{{ title }}</ion-title>
          <ion-buttons slot="end">

Not a recommended approach, it is best to let ionic manage the navigation with the back button and proper routing. I suggest you start with a template and go from there

Thanks for your reply I got it to work by seperating the ion-menu component from the toolbar and I integrate it globally into App.vue like this.

    <Menu />
    <ion-router-outlet id="main-content" />