I have a vue app that I created using the vue-cli

Im creating some components and I want to use them like this:

<template>

    <oi-list>

        <oi-list-header>Task ID</oi-list-header>

        <oi-list-header>Tasks Title</oi-list-header> 

        <oi-list-header>Task Status</oi-list-header> 

        <div v-for=task in tasks>

            <oi-list-item>{{ task.id }}</oi-list-item>

            <oi-list-item>{{ task.title }}</oi-list-item>

            <oi-list-item>{{ task.status }}</oi-list-item>

        </div>

    </oi-list>

</tempalte>

The probelm I have is where ever I use the list component I have to write the following:

<script>

    import List from '@/components/List'

    import ListHeader from '@/components/ListHeader'

    import ListItem from '@/components/ListItem'



    export default {

    name: Tasks,

    components: {

        'oi-list': List,

        'oi-list-header': ListHeader,

        'oi-list-item': ListItem

    }

<script>

What I would like is for reusable components to either be registered globally so i dont have to import them and their sub components every time i want to use them, or some how have them load dynamically when I use them. Is this possible?

I have used Vuetify in the past and that doesn't require you to import each component in order to use it.

Please can someone point me in the right direction? Thanks.