Can I use BottomNavigation with components? - vue.js

Question

I'm trying to display a bottom navigation, in which the TabContent comes from components. Now, with the following code I can't get the tab content to show, and I don't get any errors.
PageContainer.vue:
<template>
<BottomNavigation selectedIndex="1" class="tab__container" #loaded="loaded">
<TabStrip>
<TabStripItem class="tab">
<Label :text="text.groups" />
</TabStripItem>
<TabStripItem class="tab">
<Label :text="text.mail" />
</TabStripItem>
</TabStrip>
<TabContentItem>
<GroupsScreen />
</TabContentItem>
<TabContentItem>
<MailScreen />
</TabContentItem>
</BottomNavigation>
</template>
<script >
import GroupsScreen from './GroupsScreen';
import MailScreen from './MailScreen';
export default {
components: {
GroupsScreen,
MailScreen,
},
data() {
return {
text: {
groups: 'Groepen',
mail: 'Berichten',
},
}
},
}
</script>
GroupsScreen.vue:
<template>
<Frame #loaded="loaded">
<ActionBar :title="text.groups" />
<StackLayout class="page">
<Label v-if="groupsLoading" text="Loading"></Label>
</StackLayout>
</Frame>
</template>
Is this even possible, or am I trying to do something that should be done in another way?

Answer 1

The hierarchy is always,
Frame
Page
Content (Layouts, ScrollView etc.,)
A Frame can only host a Page, it can not directly host Content. You need Frame only if you want to navigate within that particular container.
So your primary issue was not wrapping your BottomNavigation with a Page element.
Updated Playground