Webpack + Vue.js + jQuery Plugin: Why "is not a function"?

Question

JavaScript

There is such a library: https://github.com/hernansartorio/jquery-nice-select

I include it in the bootstrap.js file like this: Then I try to use it already in the application in the app.js file :

require('jquery-nice-select');

require('./bootstrap');
// .. код с настройками Vue
const app = new Vue({
    router,
    components: {
      App
    },
    template: '<app></app>',
    mounted() {
        $('select').niceSelect();
    }
}).$mount('#app');

The config for building the webpack.mix.js project is used for Laravel as follows:

mix
    .js('resources/assets/js/app.js', 'public/js')
    .sass('resources/assets/sass/vendors.scss', 'public/css')
    .sass('resources/assets/sass/style.scss', 'public/css')
    .extract(
        [
            'vue',
            'vue-resource',
            'vue-router',
            'vue-scrollto',
            'vue-meta'
        ],
        'public/js/vue.js'
    )
    .extract(
        [
            'jquery',
            'bootstrap-sass',
            'jquery-nice-select',
            'owl.carousel',
            'jquery-parallax.js',
        ],
        'public/js/vendor.js'
    )
    .autoload({
        'jquery': ['$', 'jquery', 'jQuery', 'window.jQuery'],
        'tether': ['window.Tether', 'Tether'],
    })
;

However, when trying to use the niceSelect plugin, the following error occurs:

vue.js:484 [Vue warn]: Error in mounted hook: "TypeError: $(...).niceSelect is not a function"

and

TypeError: $(...).niceSelect is not a function

I do not understand where to look and what am I doing wrong? I had such a problem only with these plugins, before everything was always connected and worked correctly.

PS Note that the error is not that the function is not declared, but that it is not a function. And yes, connecting all JS in the public part is done normally:

<!-- код -->
<script src="{{ mix('/js/manifest.js') }}"></script>
<script src="{{ mix('/js/vendor.js') }}"></script>
<script src="{{ mix('/js/vue.js') }}"></script>
<script src="{{ mix('/js/app.js') }}"></script>

UPD:
By the way, the same error is displayed in directives.

Answer 1

I would suggest moving jQuery to js:

global.jquery = global.jQuery = global.$ = require('jquery');

Answer 2

There is such a library: https://github.com/sagalbot/vue-select