Не выводится шаблон vue в blade Laravel

При сохранении app.js в resources/assets/js/app.js в терминале все ок, но на странице ничего не отображается , нет никаких ошибок в консоли, ничего, даже console.log из app.js ничего не выводит. Запускал npm install, npm run dev , делал npm run watch-poll и npm run watch ничего не дает, все тот же результат

app.blade.php
<div id="app">
            <nav class="navbar navbar-default navbar-static-top">
                <div class="container">
                    <div class="navbar-header">
    
                        <!-- Collapsed Hamburger -->
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse">
                            <span class="sr-only">Toggle Navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
    
                        <!-- Branding Image -->
                        <a class="navbar-brand" href="{{ url('/') }}">
                            {{ config('app.name', 'Laravel') }}
                        </a>
                    </div>
    
                    <div class="collapse navbar-collapse" id="app-navbar-collapse">
                        <!-- Left Side Of Navbar -->
                        <ul class="nav navbar-nav">
                            &nbsp;
                        </ul>
    
                        <!-- Right Side Of Navbar -->
                        <ul class="nav navbar-nav navbar-right">
                            <!-- Authentication Links -->
                            @if (Auth::guest())
                                <li><a href="{{ route('login') }}">Login</a></li>
                                <li><a href="{{ route('register') }}">Register</a></li>
                            @else
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
                                        {{ Auth::user()->name }} <span class="caret"></span>
                                    </a>
    
                                    <ul class="dropdown-menu" role="menu">
                                        <li>
                                            <a href="{{ route('logout') }}"
                                                onclick="event.preventDefault();
                                                         document.getElementById('logout-form').submit();">
                                                Logout
                                            </a>
    
                                            <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                                                {{ csrf_field() }}
                                            </form>
                                        </li>
                                    </ul>
                                </li>
                            @endif
                        </ul>
                    </div>
                </div>
            </nav>
    
            @yield('content')
        </div>
    
        <!-- Scripts -->
        <script src="{{ asset('js/app.js') }}"></script>

add.blade.php

    @extends('layouts.app')
    @section('content')
        <add-component v-bind:data='{{json_encode($arResult) }}'> </add-component>
    @endsection


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').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.
     */
    
    Vue.component('add-component', require('./components/AddComponent.vue').default);
    
    const app = new Vue({
        el: '#app',
    });


AddComponent.vue
<template>
    <div class="container">
        Шаблон
    </div>
</template>

<script>
    export default {
        props: [
            'data'
        ],
        mounted() {
            this.update();
        },
        methods: {
            update: function () {
                console.log(this.data);
            }
        }
    }
</script>

Ответы (0 шт):