Dropdown toggle not working on laravel vue spa

I'm having a trouble on how can I view the toggle when I click the button export in Laravel vue Spa. The problem is when I click the button export, the toggle is not showing, unlike I have example image below that should view the toggle when clicks. I already load all of my JavaScript file in my public views. I think this is one of disadvantage when using SPA in laravue. One of the problem I observed in SPA, it loads first all the element js file in the public and when I go to SPA vue the js file did not rendered, is there any solution for this? It would be great if anybody could figure out, thank you so much in advance!.

Expected output , should view the toggle

vue template

   <div class="card-toolbar">
    <div class="dropdown dropdown-inline mr-2">
        <button type="button" class="btn btn-light-primary font-weight-bolder dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="svg-icon svg-icon-md">
        </span>Export</button>   //export button here
  
        <div class="dropdown-menu dropdown-menu-sm dropdown-menu-right">
            <ul class="navi flex-column navi-hover py-2">
                <li class="navi-header font-weight-bolder text-uppercase font-size-sm text-primary pb-2">Choose an option:</li>
                <li class="navi-item">
                    <a href="#" class="navi-link">
                        <span class="navi-icon">
                            <i class="la la-print"></i>
                        </span>
                        <span class="navi-text">Print</span>
                    </a>
                </li>
                <li class="navi-item">
                    <a href="#" class="navi-link">
                        <span class="navi-icon">
                            <i class="la la-copy"></i>
                        </span>
                        <span class="navi-text">Copy</span>
                    </a>
                </li>
                <li class="navi-item">
                    <a href="#" class="navi-link">
                        <span class="navi-icon">
                            <i class="la la-file-excel-o"></i>
                        </span>
                        <span class="navi-text">Excel</span>
                    </a>
                </li>
                <li class="navi-item">
                    <a href="#" class="navi-link">
                        <span class="navi-icon">
                            <i class="la la-file-text-o"></i>
                        </span>
                        <span class="navi-text">CSV</span>
                    </a>
                </li>
                <li class="navi-item">
                    <a href="#" class="navi-link">
                        <span class="navi-icon">
                            <i class="la la-file-pdf-o"></i>
                        </span>
                        <span class="navi-text">PDF</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>

My webpack.mix.js

const mix = require('laravel-mix');
const path = require('path');

mix.webpackConfig({
    resolve: {
        alias: {
            '^public': path.resolve(__dirname, 'public'),
            '^resources': path.resolve(__dirname, 'resources'),
            '^lang': path.resolve(__dirname, 'resources/js/lang'),
            '^modules': path.resolve(__dirname, 'Modules'),
        }
    }
});

mix.js('resources/js/app.js', 'public/js')
    .vue()
    .sass('resources/sass/app.scss', 'public/css');