Использование пользовательских компонентов Vue в Laravel Spark

Я довольно плохо знаком с использованием browserify и т. Д. Для разработки js. Также я новичок в Vue. Я хотел создать дополнительные пользовательские компоненты для моего приложения. Однако я терплю неудачу во многих моментах, даже если шаг за шагом следую различным учебникам.

Это то, что я сейчас получил:

example.js

var MyComponent = Vue.extend({
data: function() {
return { message: 'This is a test' }
},

template: '{{ message }}'
});

Vue.component('my-component', MyComponent);

new Vue({
el: '#example'
});

app.js

require('spark-bootstrap');

require('./../example.js');

require('./components/bootstrap');

require('./backoffice/main.js');

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

view.blade.php

<div id="example">
<my-component></my-component>
</div>

gulpfile.js

elixir(function(mix) {
mix.less('app.less')
.browserify('app.js', null, null, { paths: 'vendor/laravel/spark/resources/assets/js' })
.copy('node_modules/sweetalert/dist/sweetalert.min.js', 'public/js/sweetalert.min.js')
.copy('node_modules/sweetalert/dist/sweetalert.css', 'public/css/sweetalert.css');
});

Моя ошибка

app.js:24638[Vue warn]: Unknown custom element: <my-component> - did you register the component correctly? For recursive components, make sure to provide the "name" option.