Родной скрипт-флажок не будет отображаться

Я пытаюсь интегрировать nativescript-checkbox в свое приложение vue. Однако использование примера vue не очень понятно. Они не говорят, следует ли импортировать класс в компонент.

Но я пробовал все это, я импортировал nativescript-checkbox в свой компонент, и он все равно не отображался. Я даже пытался использовать CheckBox вместо check-box из документации.

In main.js

Vue.registerElement('CheckBox', () => require('nativescript-checkbox').CheckBox, {
    model: {
        prop: 'checked',
        event: 'checkedChange'
    }
});

in Tasks.vue

<template>
    <Page class="page">
        <ActionBar class="action-bar">
            <!--
            Use the NavigationButton as a side-drawer button in Android
            because ActionItems are shown on the right side of the ActionBar
            -->
            <NavigationButton ios:visibility="collapsed" icon="res://menu" @tap="onDrawerButtonTap"></NavigationButton>
            <!--
            Use the ActionItem for IOS with position set to left. Using the
            NavigationButton as a side-drawer button in iOS is not possible,
            because its function is to always navigate back in the application.
            -->
            <ActionItem icon="res://navigation/menu"
                        android:visibility="collapsed"
                        @tap="onDrawerButtonTap"
                        ios.position="left">
            </ActionItem>
            <Label class="action-bar-title" text="Tasks"></Label>
        </ActionBar>

        <GridLayout class="page-content">
            <!--<Label class="page-icon fa" text.decode="&#xf0ae;"></Label>
            <Label class="page-placeholder" :text="message"></Label>-->
            <ListView for="task in tasks">
                <v-template>
                    <!-- Shows the list item label in the default color and style. -->
                    <check-box :text="task.text" style="width: 25%" />
                    <Label :text="task.text" class="item" style="width: 75%" />
                </v-template>
            </ListView>
        </GridLayout>
    </Page>
</template>

<script>
    import * as utils from "~/shared/utils";
    import SelectedPageService from "../shared/selected-page-service";
    import CheckBox from 'nativescript-checkbox';

    export default {
        components: { CheckBox },
        mounted() {
            SelectedPageService.getInstance().updateSelectedPage("Tasks");
        },
        data() {
            return {
                tasks: [
                    {'text': 'One1'},
                    {'text': 'Two'},
                    {'text': 'Three'}
                ],
                isChecked: false
            }
        },
        computed: {
            message() {
                return "<!-- Tasks Page -->";
            }
        },
        methods: {
            onDrawerButtonTap() {
                utils.showDrawer();
            }
        }
    };
</script>

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

    // Custom styles
    .item {
        padding: 20;
    }
</style>