How do you use ion-tabs with IonicVueRouter in Ionic (vue.js)?

Background

I am making a exercise warm-up app. I've conceptually segmented it into a workout tab and a settings tab. In a linear fashion the workout tab lets one pick a workout plan ChooseWorkout.vue then an exercise ChooseLifts.vue then the weight ChooseWeight.vue and it will display an appropriate warmup.

The aforementioned components are working correctly and link to each other in the correct linear fashion.

What I want to do

I want to add tabbed navigation so a user can switch between the settings and the workout portion components of the app. The tabs I am making have a settings button and a workout button.

Apps flow

The problem

When I integrate the ion-tabs the main tab buttons correctly display the desired 2 components (ChooseWorkout.vue and Settings.vue) when clicked. But my problem is the router no longer works. So when I navigate from the ChooseWorkout.vue to the ChooseLifts.vue I get a blank screen, but the tabs at the bottom of the app are visible.

The url for this navigation is http://localhost:8080/#/lifts/StrongLifts%205x5 (it works prior to the ion-tabs integration were <ion-vue-router /> was solely used on main.js).

Code

App.vue

<template>
    <div id="app">
        <ion-app>
            <ion-tabs>
                <ion-tab tab="workout">
                    <ion-vue-router />
                </ion-tab>
                <ion-tab tab="settings">
                    <Settings />
                </ion-tab>
                <template slot="bottom">
                    <ion-tab-bar>
                        <ion-tab-button tab="workout">
                            <ion-icon name="body-outline" />
                            <ion-label>Workouts</ion-label>
                        </ion-tab-button>
                        <ion-tab-button tab="settings">
                            <ion-icon name="body-outline" />
                            <ion-label>Settings</ion-label>
                        </ion-tab-button>
                    </ion-tab-bar>
                </template>
            </ion-tabs>
        </ion-app>
    </div>
</template>
COPY TO CLIPBOARD    SELECT ALL

ChooseWorkout.vue

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar color="primary">
        <ion-title>Choose Workout</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content padding>
      <ion-list>
        <div v-for="workout in workouts" v-bind:key="workout">
            <ion-item>
                <ion-label>
                    <h1>{{workout.name}}</h1>
                    <p>{{workout.by}}</p>
                </ion-label>
                <router-link :to="{path:`lifts/${workout.name} `}">
                    <ion-button>Select</ion-button>
                </router-link>
            </ion-item>
        </div>
      </ion-list>
    </ion-content>
  </ion-page>
</template>

<script>
import { add } from "ionicons/icons";
import { addIcons } from "ionicons";

addIcons({
  "ios-add": add.ios,
  "md-add": add.md
});

export default {
    name: 'ChooseWorkout',
    data() {
        return {
            workouts: [
                {name: 'Starting Strength', by: 'Mark Rippetoe'},
                {name: 'StrongLifts 5x5', by: 'Mehdi'},
                {name: 'GreySkull LP', by: 'John Sheaffer'},
                {name: 'Max Single', by: 'n/a'}
            ]
        }
    },
    methods: {
    }
};
</script>

<style scope></style>

main.js

const router = new IonicVueRouter({
  routes: [
    {
      path: "/",
      redirect: "/workout"
    },
    {
      path: "/settings",
      name: "settings",
      component: Settings
    },
    {
      path: "/workout",
      component: ChooseWorkout
    },
    {
      path: "/lifts/:workout",
      component: ChooseLifts
    },
    {
      path: "/lifts/:workout/:excercise",
      component: ChooseWeight
    },
  ]
});