IONIC VUE: ion-menu-button not showing; confusing doc

In the templates below I have a ion-menu-button that is not showing up

I tried fiddling with autoHide property and the doc says "Automatically hides the menu button when the corresponding menu is not active" with a default of true

So does that mean that if the menu is hidden the button is hidden too ? This makes no sense to me. What is "corresponding menu" ?

If I put autoHide to false then my button is there... Could someone clarify this for me ?

App.Vue

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

My child page

<template>
 <ion-page>
<ion-header :translucent="true" class="pageHeader">
  <ion-toolbar class="toolbar">
    <ion-buttons slot="start">
      <ion-menu-button color="primary"></ion-menu-button>
    </ion-buttons>
    <ion-title>{{ $route.name }}</ion-title>
  </ion-toolbar>
</ion-header>