title: Laravel - Issues with Vue and Javascript
body: <p>Using</p>
  
  <ul>
  <li>Laravel 5.7</li>
  <li>Buefy  0.7.3</li>
  <li>Vue 2.5.17</li>
  </ul>
  
  <p>In my project, I have a sidebar which has elements that slide down up with javascript code .. and in my page, I have a <code>Tab</code> from <code>Buefy</code>
  Now I notice that every page contains any <code>Vue</code> 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</p>
  
  <p>show.blade.php (example)</p>
  
  <pre><code>@section('content')
  &lt;b-tabs&gt;
      &lt;b-tab-item label="Pictures"&gt;
         Lorem ipsum dolor sit amet.
      &lt;/b-tab-item&gt;
  
      &lt;b-tab-item label="Music"&gt;
         Lorem &lt;br&gt;
         ipsum &lt;br&gt;
      &lt;/b-tab-item&gt;
  
  &lt;/b-tabs&gt;
  @endsection
  
  @section('scripts')
      &lt;script&gt;
          var app = new Vue({
              el: '#app',
              data: {
              }
          });
      &lt;/script&gt;
  @endsection
  </code></pre>
  
  <p>sidebar.blade</p>
  
  <pre><code>&lt;div class="side-menu" id="admin-side-menu"&gt;
      &lt;aside class="menu"&gt;
          &lt;p class="menu-label"&gt;
              General
          &lt;/p&gt;
          &lt;!--./menu-label--&gt;
  
          &lt;ul class="menu-list"&gt;
              &lt;a href="{{route('dashboard.index')}}" class="{{Nav::isRoute('dashboard.index')}}"&gt;
                  &lt;span class="icon"&gt;&lt;i class="fas fa-tachometer-alt m-l-5"&gt;&lt;/i&gt;&lt;/span&gt;{{__('site.dashboard')}}
              &lt;/a&gt;
          &lt;/ul&gt;
  
          &lt;p class="menu-label"&gt;
              Content
          &lt;/p&gt;
          &lt;!--./menu-label--&gt;
  
          &lt;ul class="menu-list"&gt;
              &lt;li&gt;
                  &lt;a href="{{route('dashboard.users.index')}}" class="{{Nav::isResource('users')}}"&gt;
                      &lt;span class="icon"&gt;&lt;i class="fas fa-users m-l-5"&gt;&lt;/i&gt;&lt;/span&gt;{{__('site.users')}}
                  &lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
  
          &lt;p class="menu-label"&gt;
              Administration
          &lt;/p&gt;
  
          &lt;ul class="menu-list"&gt;
              &lt;li&gt;
                  &lt;a class="has-submenu {{Nav::hasSegment(['roles', 'permissions'], 2)}}"&gt;
                      &lt;span class="icon"&gt;&lt;i class="fas fa-cog m-l-5"&gt;&lt;/i&gt;&lt;/span&gt;{{__('site.roles')}} و
                      {{__('site.permissions')}}
                  &lt;/a&gt;
                  &lt;ul class="submenu"&gt;
                      &lt;li&gt;&lt;a href="{{route('dashboard.roles.index')}}" class="{{Nav::isResource('roles')}}"&gt;{{__('site.roles_list')}}
                          &lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="{{route('dashboard.permissions.index')}}" class="{{Nav::isResource('permissions')}}"&gt;{{__('site.permissions_list')}}&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
  
      &lt;/aside&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Dashboard.js</p>
  
  <pre><code>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 &lt; 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")
          }
      }
  }
  </code></pre>
  
  <p>App.js</p>
  
  <pre><code>window.Vue = require('vue');
  
  import Buefy from 'buefy'
  Vue.use(Buefy)
  require('./dashboard')
  </code></pre>
  
  <p>there is no errors in console</p>