vue3-select2-component: select2 is not a function & Unhandled error during execution of mounted hook

Hello!

I am trying to implement the vue3 version of this component, and I have encountered this error:

Screen Shot 2023-01-20 at 2 49 47 PM

This is how I've implemented it:

    <template>
        <Head title="Docs - Frontend"/>
        <div class="be-content be-no-padding">
            <Nav/>
            <div class="main-content container-fluid">
                <div class="bg-white" style="padding: 5rem;">
                    <div class="row">
                        <div class="col-12">
                                <Select2
                                    id="select2"
                                    name="select2"
                                    v-model="multiSelectValue"
                                    :options="multiSelectOptions"
                                    :settings="{ placeholder: 'Select an option', multiple: true, }"
                                    @change="myChangeEvent($event)" @select="mySelectEvent($event)"
                                />
                                <p>The selected options are: {{ multiSelectValue }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </template>

    <script>
    import AuthenticatedLayoutWithSidebar from '@/Pages/Internal/AuthenticatedLayoutWithSidebar.vue';
    import Select2 from 'vue3-select2-component';
    export default {
        layout: AuthenticatedLayoutWithSidebar,
        name: "SelectDocs",
        components: {
            Select2,
        },
        data() {
            return {
                multiSelectValue: [],
                multiSelectOptions: [
                    {id: 1, text: "Option 1"},
                    {id: 2, text: "Option 2"}
                ]
            };
        },
        methods: {
            myChangeEvent(val) {
                console.log(val);
            },
            mySelectEvent({id, text}) {
                console.log({id, text})
            }
        }
    }
    </script>

The console also shows the error:

    Select2.vue:99 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'select2')

Screen Shot 2023-01-20 at 2 57 43 PM

I followed this post to get jQuery to work, but it looks like something didn't quite work.

godbasin / vue-select2

vue3-select2-component: select2 is not a function & Unhandled error during execution of mounted hook #68