Laravel - Issues with Vue and Javascript

Question

Using

• Laravel 5.7
• Buefy 0.7.3
• Vue 2.5.17

In my project, I have a sidebar which has elements that slide down up with javascript code .. and in my page, I have a Tab from Buefy Now I notice that every page contains any Vue object .. the javascript code dosen’t work so the sidebar elements didn’t slide down or up as expected .. but it works well in the other pages

show.blade.php (example)

@section('content')
<b-tabs>
    <b-tab-item label="Pictures">
       Lorem ipsum dolor sit amet.
    </b-tab-item>

    <b-tab-item label="Music">
       Lorem <br>
       ipsum <br>
    </b-tab-item>

</b-tabs>
@endsection

@section('scripts')
    <script>
        var app = new Vue({
            el: '#app',
            data: {
            }
        });
    </script>
@endsection

sidebar.blade

<div class="side-menu" id="admin-side-menu">
    <aside class="menu">
        <p class="menu-label">
            General
        </p>
        <!--./menu-label-->

        <ul class="menu-list">
            <a href="{{route('dashboard.index')}}" class="{{Nav::isRoute('dashboard.index')}}">
                <span class="icon"><i class="fas fa-tachometer-alt m-l-5"></i></span>{{__('site.dashboard')}}
            </a>
        </ul>

        <p class="menu-label">
            Content
        </p>
        <!--./menu-label-->

        <ul class="menu-list">
            <li>
                <a href="{{route('dashboard.users.index')}}" class="{{Nav::isResource('users')}}">
                    <span class="icon"><i class="fas fa-users m-l-5"></i></span>{{__('site.users')}}
                </a>
            </li>
        </ul>

        <p class="menu-label">
            Administration
        </p>

        <ul class="menu-list">
            <li>
                <a class="has-submenu {{Nav::hasSegment(['roles', 'permissions'], 2)}}">
                    <span class="icon"><i class="fas fa-cog m-l-5"></i></span>{{__('site.roles')}} و
                    {{__('site.permissions')}}
                </a>
                <ul class="submenu">
                    <li><a href="{{route('dashboard.roles.index')}}" class="{{Nav::isResource('roles')}}">{{__('site.roles_list')}}
                        </a></li>
                    <li><a href="{{route('dashboard.permissions.index')}}" class="{{Nav::isResource('permissions')}}">{{__('site.permissions_list')}}</a></li>
                </ul>
            </li>
        </ul>

    </aside>
</div>

Dashboard.js

const accordions = document.getElementsByClassName('has-submenu')
function setSubmenuStyles(submenu, maxHeight, margins) {
    submenu.style.maxHeight = maxHeight
    submenu.style.marginTop = margins
    submenu.style.marginBottom = margins
}
for (var i = 0; i < accordions.length; i++) {
    if (accordions[i].classList.contains('is-active')) {
        const submenu = accordions[i].nextElementSibling
        setSubmenuStyles(submenu, submenu.scrollHeight + "px", "0.75em")
    }

    accordions[i].onclick = function () {
        this.classList.toggle('is-active')

        const submenu = this.nextElementSibling
        if (submenu.style.maxHeight) {
            // menu is open, we need to close it now
            setSubmenuStyles(submenu, null, null)
        } else {
            // meny is close, so we need to open it
            setSubmenuStyles(submenu, submenu.scrollHeight + "px", "0.75em")
        }
    }
}

App.js

window.Vue = require('vue');

import Buefy from 'buefy'
Vue.use(Buefy)
require('./dashboard')

there is no errors in console