javascript — определение компонента vuejs в блейде

@extends('layouts.app')
@section('body')
<div class="general_wrapper" id="profile">
@component('components.nav.main')
@slot('menu')
<div class="nav_menu">
<ul>
<li :class="{'active': tab==0}" @click="tabSelect(0)">
item0
</li>
<li :class="{'active': tab==1}" @click="tabSelect(1)">
item1
</li>
</ul>
</div>
@endslot
@endcomponent
</div>
@endsection
@section('script')
<script>
const profile = new Vue({
el: '#app',
data: {
tab: 0
},
methods: {
tabSelect(id) {
profile.tab = id;
}
}
});
</script>
@endsection

Мне нужен этот пакет кода внутри моего проекта. Я не знаю, что с этим не так.
Я получил эту ошибку:

Свойство или метод «tab» не определены в экземпляре, но
ссылка во время рендера.

Я удалил ‘const app = new Vue ({el:’ #app ‘});’ из app.js это работает, но у меня есть другой компонент Vue в моем проекте, и это сделало еще один неизвестным …