Using Vue.js components within other components with Spark

I'm having a bit of trouble understanding how I can use child components, here is an example of my app.js file:

require('spark-bootstrap');

require('./components/bootstrap');

Spark.forms.register = {
    company: ''
};

import ExampleComponent from './components/ExampleComponent.vue';
Vue.component('example-component', ExampleComponent);

Vue.component('home', {
    components: {
      ExampleComponent
    },

    props: ['user'],

    mounted() {
        //
    }
});

const app = new Vue({
    mixins: [require('spark')]
});

As you can see I am importing a component called ExampleComponent and then attaching it to my home component as a child. In my home.blade.php file the ExampleComponent works fine outside of the home component however when I put it inside like so:

<home :user="user" inline-template>
  <example-component></example-component>
    <div id="default-app__container" class="container-fluid">
        <!-- Application Dashboard -->
        <div class="row justify-content-center">
            @include('sections.sidebar')
            <div class="content__section">
                <div class="mx-5">
                  <h1>Welcome, @{{ user.name }}</h1>
                </div>
                <div class="card card-default mx-5">
                    <div class="card-header">{{__('Dashboard')}}</div>

                    <div class="card-body">
                        {{__('Your application\'s dashboard.')}}
                    </div>
                </div>
            </div>
        </div>
    </div>
</home>

I get this error in the console:

[Vue warn]: Error compiling template:

<div id="spark-app" class="logged-in" v-cloak="">
        <!-- Navigation -->
                    <!-- NavBar For Authenticated Users -->
<spark-navbar :user="user" :teams="teams" :current-team="currentTeam" :unread-announcements-count="unreadAnnouncementsCount" :unread-notifications-count="unreadNotificationsCount" inline-template="">

    <nav id="navbar" class="navbar navbar-light navbar-expand-md navbar-spark">
        <div class="container-fluid" v-if="user">
            <!-- Branding Image -->
            <a class="navbar-brand" href="/home">
    <img class="logo" src="http://autommerce.local/img/logo.png" alt="logo">
</a>

            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div id="navbarSupp…

Any idea how I can stop this from happening?

I also tried including the template into the blade file like so <example-component inline-template></example-component> however I get this error TypeError: ast is undefined[Learn More]. It seems inline-templates always return this error message, any idea how you can register them?