При расширении макета, который содержит div с идентификатором «app», элементы vue не будут загружаться и выдают ошибку «Cannot find element: #app»
Я попытался создать новый макет, который представляет собой @yield, завернутый в div с идентификатором приложения, и очень простой компонент, и получил те же результаты.
ExampleComponent.vue
<template>
<div class="container">
{{ count }}
</div>
</template>
<script>
export default{
data() {
return {
count: 0
}
}
}
</script>
app.js
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
const app = new Vue({
el: '#app',
});
welcome.blade.php
@extends('layouts.new')
@section('content')
<example-component></example-component>
@endsection
new.blade.php
<head>
<script src="{{ asset('js/app.js') }}"></script>
</head>
<body>
Hello
<div id="app">
@yield('content')
</div>
</body>
Я ожидаю, что число 0 появится на странице, но ничего не отображается и в консоли появляется ошибка:
"[Vue warn]: не удается найти элемент: #app"
При проверке страницы примерный компонент оборачивается в div с идентификатором приложения.
Почему я получаю эту ошибку?