Nativescript Vue this. $ NavigateTo ничего не делает

РЕДАКТИРОВАТЬ: см. мой комментарий ниже о добавлении элементов в шаблон Vue

Сегодня снова ИЗМЕНИТЬ: Хорошо, вот что на самом деле приводит к тому, что this.$navigateTo перестает работать ... Если я импортирую службу для выполнения http-вызова к api отдыха в Friends.vue для получения данных в монтируется (), это приводит к тому, что this.$navigateTo перестает работать из вызывающего Home.vue. Кто-нибудь может подсказать, почему?

Это в Friends.vue ...

    mounted() {
    console.log(`${this.codeFile}: mounted() fired`);
    httpService.getAllFriends((data, err) => {
        this.friends = data;
        if (err) {
            console.error(
                `${this.codeFile}: mounted: getAllFriends: `,
                err
            );
        }
    });
},

Мне действительно кажется, что мой код похож на документацию, но мой this.$navigateTo(Friends) ничего не делает. Я вижу сообщение console.log в порядке, но страница не меняется. Что я не вижу в документации?

<template>
    <Page class="page">
        <ActionBar class="action-bar" title="Home"></ActionBar>
        <ScrollView>
            <StackLayout backgroundColor="#3c495e">
                <Label
                    text="Friends"
                    @tap="gotoFriendsPage()"
                    height="70"
                    backgroundColor="#43b883"
                />
                <Label text="Places" height="70" backgroundColor="#289062"/>
                <Label text="Messages" height="70" backgroundColor="#1c6b48"/>
            </StackLayout>
        </ScrollView>
    </Page>
</template>

<script>
import Friends from "./Friends";

export default {
    data() {
        return {
            codeFile: "Home.vue",
            friendsPage: Friends
        };
    },
    created() {
        //console.log(`${this.codeFile}: created() fired`);
    },
    mounted() {
        //console.log(`${this.codeFile}: mounted() fired`);
    },
    computed: {},
    methods: {
        gotoFriendsPage: function() {
            console.log(`${this.codeFile}: gotoFriendsPage fired`);
            this.$navigateTo(Friends);
        }
    }
};
</script>

<style scoped lang="scss">
// Start custom common variables
@import "../_app-variables.scss";
// End custom common variables

// Custom styles
.action-bar {
    background-color: $blue-dark;
    color: $blue-light;
}
.body {
    color: gray;
}
.fa {
    color: $accent-dark;
    font-size: 16;
}
.col-text {
    text-align: left;
    margin-bottom: 3;
    padding: 5;
}
.col-title {
    text-align: left;
    margin-bottom: 0;
    padding: 5;
    padding-bottom: 0;
    font-weight: bold;
}
.info {
    font-size: 20;
}
</style>

РЕДАКТИРОВАТЬ: добавление app.js

    import Vue from "nativescript-vue";
import Home from "./components/Home";

const template = `
    <Frame>
        <Home />
    </Frame>
`;

new Vue({
    template: template,
    components: {
        Home
    },
    mounted: function () {
        //console.log('app.js mounted fired...');
    },
    created: function () {
        //console.log('app.js created fired...');
    }
}).$start();