javascript — компонент Vue не отображается: Laravel5.4 и Vue.js2

Я новичок в Vue.js и использую его с L5,4. В моем проекте вид не отображается. Я запускаю npm, запускаю watchand, он работает правильно

app.js

/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
Vue.http.headers.common['X-CSRF-TOKEN'] = $('meta[name="csrf-token"]').attr('content');

/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
//Vue.component('test', require('./components/Test.vue'));
Vue.component('upload', require('./components/Upload.vue'));

const app = new Vue({
el: '#app'
});

bootstrap.js

window._ = require('lodash');

/**
* We'll load jQuery and the Bootstrap jQuery plugin which provides support
* for JavaScript based Bootstrap features such as modals and tabs. This
* code may be modified to fit the specific needs of your application.
*/

window.$ = window.jQuery = require('jquery');

require('bootstrap-sass');

/**
* Vue is a modern JavaScript library for building interactive web interfaces
* using reactive data binding and reusable components. Vue's API is clean
* and simple, leaving you to focus on building your next great project.
*/

window.Vue = require('vue');
require('vue-resource');/**
* We'll load the axios HTTP library which allows us to easily issue requests
* to our Laravel back-end. This library automatically handles sending the
* CSRF token as a header based on the value of the "XSRF" token cookie.
*/

window.axios = require('axios');

window.axios.defaults.headers.common = {
'X-CSRF-TOKEN': window.Laravel.csrfToken,
'X-Requested-With': 'XMLHttpRequest'
};

/**
* Echo exposes an expressive API for subscribing to channels and listening
* for events that are broadcast by Laravel. Echo and event broadcasting
* allows your team to easily build robust real-time web applications.
*/

// import Echo from "laravel-echo"
// window.Echo = new Echo({
//     broadcaster: 'pusher',
//     key: 'your-pusher-key'
// });

upload.blade.php

@extends('layouts.app')
@section('content')
<upload></upload>
@endsection

Upload.vue

<template>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">UploadComponent</div>

<div class="panel-body">
upload...
</div>
</div>
</div>
</div>
</div>
</template>

<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>

package.json

{
"private": true,
"scripts": {
"dev": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch-poll": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --watch-poll --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"},
"devDependencies": {
"axios": "^0.15.3",
"bootstrap-sass": "^3.3.7",
"cross-env": "^3.2.3",
"jquery": "^3.1.1",
"laravel-mix": "^0.8.3",
"lodash": "^4.17.4",
"vue": "^2.1.10"}
}

npm run watch дает следующее

E:\xampp\htdocs\l54>npm run watch

> @ watch E:\xampp\htdocs\l54
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

10% building modules 1/1 modules 0 active
Webpack is watching the files…

95% emitting

DONE  Compiled successfully in 7126ms                                                                        7:53:46 AM

Asset      Size  Chunks                    Chunk Names
fonts/glyphicons-halflings-regular.eot?f4769f9bdb7466be65088239c12046d1   20.1 kB          [emitted]
fonts/glyphicons-halflings-regular.svg?89889688147bd7575d6327160d64e760    109 kB          [emitted]
fonts/glyphicons-halflings-regular.ttf?e18bbf611f2a2e43afc071aa2f4e1512   45.4 kB          [emitted]
fonts/glyphicons-halflings-regular.woff?fa2772327f55d8198301fdb8bcfc8158   23.4 kB          [emitted]
fonts/glyphicons-halflings-regular.woff2?448c34a56d699c29117adc64c43affeb     18 kB          [emitted]
/js/app.js   1.18 MB       0  [emitted]  [big]  /js/app
/css/app.css    683 kB       0  [emitted]  [big]  /js/app
mix-manifest.json  66 bytes          [emitted]

Я не получаю пустую белую страницу и никаких ошибок в консоли. Что здесь происходит, почему мой компонент не отображается