Requiring bootstrap-sass from different js sources

I'm using webpack and laravel mix to create two js files

main.js -- this loads scripts that will be needed on all pages

special.js -- this one is specific to a certain set of pages that need special functionality... there is a Vue app in here

My webpack.mix.js looks like this

mix.js('resources/assets/js/special.js', 'public/js')
   .js('resources/assets/js/main.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

This is a Laravel project, so in the main html template, I include main.js on all pages. Then, underneath that, I have a @yield('foot') statement.

In the pages that need the special script, I Include this:

@section('foot')
    <script type="text/javascript" src="/js/special.js"></script>
@endsection

The reason is that the special.js file is really big so I don't want to have to include it on every page when only a handful of the pages need it.

Now the problem occurs because I have this line in main.js

require('bootstrap-sass');

I need this for certain bootstrap functions to work throughout the site, and indeed it does work. There is a navigation at the top that has a drop down... without this require line, it does not work.

However, when I go to my special pages, which includes a Vue app, certain bootstrap related functionalities do not work within the app (they still work outside of it though, i.e. the navigation menu on that same page still works).

If I take the require('bootstrap-sass') statement out of main.js and put it in special.js, the bootstrap functionality works in the vue app as well as in the drop down menu on those special pages that include the special.js file, but the pages that don't include the special.js files (all the other pages on my site) break, i.e. the navigation menu does not work.

If I put them in both, then on the special pages the Vue app breaks and the navigation menu doesn't work... on other pages the navigation menu works fine.

Any help would be appreciated.