NativeScript Vue Frame navigateTo not navigating

[edit] -> Playground Link

I am using NativeScript and Vue to create an app. Once it loads, I want to show a login page, or navigate somewhere else if the user has previously logged in. My page loads but doesn't navigate to the login page. This is being run in an IOS emulator.

<template>
    <Page>
        <RadSideDrawer ref="drawer" showOverNavigation="true">
            <StackLayout ~drawerContent backgroundColor="#ffffff">
                <Label class="drawer-header" text="Drawer"/>

                <Label class="drawer-item" text="Static 1"/>
                <Label class="drawer-item" text="Static 2"/>
                <Label class="drawer-item" text="Static 3"/>
            </StackLayout>
            <Frame ~mainContent> 
                <Page> <!-- test to see if mainContent navigates -->
                    <TextField class="input" hint="Email" keyboardType="email" autocorrect="false" autocapitalizationType="none" v-model="user.email"
                     returnKeyType="next" fontSize="18" />
               </Page>
            </Frame>
        </RadSideDrawer>
    </Page>
</template>

<script>
import homePage from './HomePage'
import loginPage from './LoginPage'

export default {
    data() {
        return {
            isLoggingIn: true,
            user: {
                email: "foo@foo.com",
                password: "foo",
                confirmPassword: "foo"
            }
        };
    },
    mounted() {
        this.user.email = "test@example.com", <!-- Change email to check mounted is called.  It is! -->
        this.$navigateTo(loginPage, { frame: "mainContent" } )
    }
};
</script>

I cannot work out what I am doing wrong and cannot work out from the source either. Any help/suggestions would be greatly appreciated.