Vueify / VueRouter / Laravel — Компонент не определен

Я создаю относительно простое приложение laravel и хотел изучить Vue.js … который превращается в супер расстраивающий беспорядок …

Во всяком случае, вот в чем проблема. Независимо от того, что я делаю, я получаю ошибку, что мой компонент не определен.

Вот что у меня есть …

Gulpfile

var elixir = require('laravel-elixir');
require('laravel-elixir-vueify');

// Elixir Mixins.
elixir(function(mix) {
mix.sass('app.scss');
mix.browserify('main.js');
});

/resources/assets/js/main.js

   var Vue =  require('vue');
var VueRouter = require('vue-router');
Vue.use(VueRouter);
import Form2016_1099_misc from './components/2016-1099-misc.vue';
Vue.component('Form2016_1099_misc', Form2016_1099_misc);

В моем файле лезвия …

@section('content')
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- use v-link directive for navigation. -->
<a v-link="{ path: '/recipient' }">Go to Recipient</a>
<a v-link="{ path: '/form/2016/1099-misc' }">Go to 1099</a>
</p>
<!-- route outlet -->
<router-view></router-view>
</div>
@endsection

@section('footer')
<script src="{{ asset('/js/main.js') }}"></script>

<script>
// Define some components
var RecipientForm = Vue.extend({
template: '<p>This is the recipient form.</p>'
});
var App = Vue.extend({});
var router = new VueRouter();

router.map({
'/recipient': {
component: RecipientForm
},

'/form/2016/1099-misc': {
component: Form2016_1099_misc
},
});
router.start(App, '#app');
</script>
@endsection

/resources/assets/js/components/2016-1099-misc.vue

<template>
{{ msg }}
</template>

<style>

</style>

<script>
export default{
data(){
return{
msg: 'This is a test'
}
}
}
</script>

Я бегу глотком, и он работает успешно. Когда я иду, чтобы просмотреть страницу в моем браузере, я получаю сообщение об ошибке

ReferenceError: Form2016_1099_misc is not defined

Я уверен, что я делаю кучу вещей неправильно. Я супер новичок в Vue, и я изо всех сил пытаюсь понять это …

Обновить:

Я переместил весь код скрипта из моего blade-файла в файл main.js, и теперь main.js выглядит следующим образом:

var Vue =  require('vue');
var VueRouter = require('vue-router');
use(VueRouter);
import Form2016_1099_misc from './components/2016-1099-misc.vue';
Vue.component('Form2016_1099_misc', Form2016_1099_misc);

// Define some components
var RecipientForm = Vue.extend({
template: '<p>This is the recipient form.</p>'
});

var App = Vue.extend({});
var router = new VueRouter();

router.map({
'/recipient': {
component: RecipientForm
},

'/form/2016/1099-misc': {
component: Form2016_1099_misc
},});

router.start(App, '#app');

Теперь я получаю сообщение об ошибке

[Vue warn]: Failed to resolve directive: link (found in component: <router-app>)
[Vue warn]: Unknown custom element: <router-view> - did you register the component correctly? For recursive components, make sure to provide the "name" option.