Uncaught TypeError: Vue.component is not a function

Question

In OS X with Laravel/Homestead, I'm getting an error using Vue (v2.2.1). The component won't load and the console error is "Uncaught TypeError: Vue.component is not a function".

Full console error

    Uncaught TypeError: Vue.component is not a function
        at eval (eval at <anonymous> (app.js:321), <anonymous>:17:5)
        at Object.<anonymous> (app.js:321)
        at __webpack_require__ (app.js:20)
        at app.js:64
        at app.js:67  

What is throwing me off is that if I make a change to app.js, the webpack does not update to reflect any changes. So I need to A) fix the issue above, and B) figure out how to get the webpack to show updates in the console.

Any help would be greatly appreciated! I'm a noob. Here is my code...

app.js file

    Vue.component('video-upload', require('./components/VideoUpload.vue'));

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

VideoUpload.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">Example</div>

                        <div class="panel-body">
                            This is an example
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </template>

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

upload.blade.php

    @extends('layouts.app')

    @section('content')
        <video-upload></video-upload>
    @endsection

package.json

    {
      "private": true,
      "scripts": {
        "prod": "gulp --production",
        "dev": "gulp watch"
      },
        "devDependencies": {
        "bootstrap-sass": "^3.3.7",
        "gulp": "^3.9.1",
        "jquery": "^3.1.0",
        "laravel-elixir": "^6.0.0-9",
        "laravel-elixir-vue": "^0.1.4",
        "laravel-elixir-webpack-official": "^1.0.2",
        "lodash": "^4.14.0",
        "video.js": "^5.11.6",
        "vue": "^2.2.1",
        "vue-resource": "^0.9.3"
      }
    }

Answer 1

After an update from laravel-mix 5.0.9 to laravel-mix 6.0.11 on a laravel 7 project it started to see this error on vue compiled views. I change the call the Vue package:

Use import Vue from 'vue' instead of window.Vue = require("vue"); worked for me.

Answer 2

import vue properly in your code using import keyword like this:

//import vue
import Vue from 'vue';

//register component
Vue.component('yourComponentName',require('./components/yourComponentName.vue').default);

//initialize vue
const app = new Vue({
    el: '#app',
});