lIve-reload VueJS component not rendered

When I build my app and launch my app with Xcode everything works fine, and I can utilise a global base template for include ionPage by importing the components:

import BaseLayout from '@/swaps/components/base/BaseLayout';

and

<template>
    <base-layout>
        // content
    </base-layout>
</template>

However when launch the app with live-reload these components fail to render, and break the app with an error of The view you are trying to render for path /tabs/dashboard does not have the required <ion-page> component. Transitions and lifecycle methods may not work as expected.

My base template has:

<template>
    <ion-page ref="base">
        <ion-content :fullscreen="true" ref="myContent" :scroll-y="(!(room && !swap))" :class="(room && !swap) ? 'no-scroll' : ''" class="bg-white">
            <slot ref="slot" />
        </ion-content>
    </ion-page>
</template>