Почему не отображается скрипт?

Question

[Elbakidze]

Всем здравствуйте, опишу свои действия пошагово:
1)Установил laravel
2)В командной строке ввел npm install
3)Создал компонент ImageUpload.vue

<template>
    <div class="container">
        <div class="progress" style="height: 40px">
            <div class="progress-bar" role="progressbar" :style="{width:fileProgress + '%' }">
                {{ fileCurrent }}%
            </div>
        </div>
        <hr>
        <input type="file" name="image" multiple="" @change="fileInputChange">
        <hr>
        <div class="row">
            <div class="col-sm-6">
                <h3 class="text-center">Файлы в очереди ({{ files0rder.length }})</h3>
                <ul class="list-group">
                    <li class="list-group-item" v-for="file in files0rder">
                        {{ file.name }} : {{ file.type }}
                    </li>
                </ul>
            </div>
            <div class="row">
                <div class="col-sm-6">
                <h3 class="text-center">Загруженные файлы ({{ fileFinish.length }})</h3>
                <ul class="list-group">
                    <li class="list-group-item" v-for="file in fileFinish">
                        {{ file.name }} : {{ file.type }}
                    </li>
                </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                files0rder: [],
                fileFinish:[],
                fileProgress:0,
                fileCurrent:''
            }
        },
        methods:{
            async fileInputChange(){
                let files = Array.from(event.target.files);
                this.files0rder = files.slice();
                for (let item of files){

                    await this.uploadFile(item);

                }
            },
            async uploadFile(item) {
                let form = new FormData();
                form.append('image', item);

                await axios.post('/image/upload', form, {
                    onUploadProgress:(itemUpload) => {
                        this.fileProgress = Math.round( (itemUpload.loaded / itemUpload.total) * 100);
                        this.fileCurrent = item.name + ' ' + this.fileProgress;
                    }
                }
            )
                .then(response => {
                    this.fileprogress = 0;
                    this.fileCurrent = '';
                    this.fileFinish.push(item);
                    this.files0rder.splice(item, 1);
                })
                    .catch(error => {
                        console.log(error);
                    })
            }
        }
    }
</script>

4) Добавил маршрут в 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');

window.Vue = require('vue');

/**
 * The following block of code may be used to automatically register your
 * Vue components. It will recursively scan this directory for the Vue
 * components and automatically register them with their "basename".
 *
 * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
 */

// const files = require.context('./', true, /\.vue$/i);
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default));

Vue.component('example-component', require('./components/ExampleComponent.vue').default);
Vue.component('image-upload', require('./components/ImageUpload.vue').default);

/**
 * 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.
 */

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

5) Добавил тег отображения скрипта на главную

<div id="app" class="input-group mb-4">
                        <h4>Добавить фото</h4>
                        <image-uoload></image-uoload>
                    </div>

6)В командной строке набрал npm run dev
Но скрипт почему то не отображается на главной, в чем причина подскажите пожалуйста?

Comments

[Родион Альметов]

<div id="app" class="input-group mb-4">
                        <h4>Добавить фото</h4>
                        <image-uoload></image-uoload>
                    </div>

Это в коде опечатка или в посте в image-upload?

[Elbakidze]

Родион Альметов, Это я в коде добавил, сейчас убрал и див и h4
Оставил просто

@extends('template')
@section('content')

   <div class="container">
      <div class="row justify-content-center">
         <div class="col-md-8">


            <div class="panel-heading"><h2>Создать объявление</h2></div>

            <form>
               <div class="input-group mb-4">
                  <label for="name" class="col-md-4 col-form-label text-md-right">{{ __('Заголовок') }}</label>
                  <input type="text" class="form-control" id="inlineFormInputName">
               </div>
            </form>

            <form>
               <div class="input-group mb-4">
                  <label for="name" class="col-md-4 col-form-label text-md-right">{{ __('Описание') }}</label>
                  <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" ></textarea>
               </div>
            </form>

            <form>
               <div class="input-group mb-4">
                  <label for="name" class="col-md-4 col-form-label text-md-right">{{ __('Цена') }}</label>
                  <input class="form-control" type="text">
                  <div class="input-group-append">
                     <span class="input-group-text"><i class="fa fa-rub"></i></span>
                  </div>
               </div>
            </form>


           


               <image-uoload></image-uoload>







@endsection