Nested Navigation with nativescript-vue-navigator?

App.vue

<template lang="html">
    <Navigator defaultRoute="/login"/>
</template>

LoginPage.vue

<script lang="ts">
  private async onLoginTap() {
    this.$navigator.navigate('/main', {
        clearHistory: true,
    });
  }
</script>

Main.vue

<template>
    <Page>
        <BottomNavigation>
            <TabStrip>
                <TabStripItem class="navigation__item">
                    <Label text="News"></Label>
                    <Image src.decode="font://&#xf015;" class="fas t-36"></Image>
                </TabStripItem>
                <TabStripItem class="navigation__item">
                    <Label text="Developers"></Label>
                    <Image src.decode="font://&#xf015;" class="fas t-36"></Image>
                </TabStripItem>
            </TabStrip>

            <TabContentItem>
                <Frame id="frame-1">
                    <Navigator defaultRoute="/feed"/>
                </Frame>
            </TabContentItem>

            <TabContentItem>
                <Frame id="frame-3">
                    <Diagnostics/>
                </Frame>
            </TabContentItem>
        </BottomNavigation>
    </Page>
</template>