Failed to resolve component: ejs-multiselect with VueJs, import error - vue.js

Question

i'm trying to integrate the CheckBox in Vue MultiSelect component from here: https://ej2.syncfusion.com/vue/documentation/multi-select/checkbox/#checkbox
into my project
the code looks like this:
<template>
<div id="category-definition-details">
<form class="create-form">
...
<div id='container' style="margin:15px auto 0; width:250px;">
<ejs-multiselect id='multiselect' :dataSource='sportsData' placeholder="Find a game" mode="CheckBox" :fields='fields'></ejs-multiselect>
</div>
</form>
</div>
</template>
<script>
import { Options, Vue } from "vue-class-component";
import { Prop } from "vue-property-decorator";
...
import { MultiSelectPlugin } from "#syncfusion/ej2-vue-dropdowns";
import { MultiSelect, CheckBoxSelection } from '#syncfusion/ej2-dropdowns';
MultiSelect.Inject(CheckBoxSelection);
#Options({
components: { MultiSelectPlugin },
})
export default class myClass extends Vue {
data (){
return {
sportsData: [
{ Id: 'game1', Game: 'Badminton' },
{ Id: 'game2', Game: 'Football' },
{ Id: 'game3', Game: 'Tennis' },
{ Id: 'game4', Game: 'Golf' },
{ Id: 'game5', Game: 'Cricket' },
{ Id: 'game6', Game: 'Handball' },
{ Id: 'game7', Game: 'Karate' },
{ Id: 'game8', Game: 'Fencing' },
{ Id: 'game9', Game: 'Boxing' }
],
fields : { text: 'Game', value: 'Id' }
}
}
}
</script>
i get the following warning
[Vue warn]: Failed to resolve component: ejs-multiselect
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions...
i tried to add the line Vue.use(MultiSelectPlugin);
but it doesn't work since i already imported Vue from vue-class-component
i also tries to add the following lines
import * as _vue from 'vue';
_vue.use(MultiSelectPlugin);
but i get the error Property 'use' does not exist on type import...
someone knows what is the correct way to import this module?

Answer 1

I have just added all the relevant code. onSelect method will help to push your data to selectedSports. selectedSports will have your selected values.
Template Code: Put it in your template under some div
<ejs-multiselect
id="multiselect"
:dataSource="sportsData"
:select="onSelect"
></ejs-multiselect>
Script Code: Put it in your script
import { MultiSelectComponent } from "#syncfusion/ej2-vue-dropdowns";
// add ejs-multiselect where you have defined your components
export default defineComponent({
// removed extra code
components: {
"ejs-multiselect": MultiSelectComponent
},
data() {
return {
sportsData: [
"Cricket",
"Badminton",
"Golf",
"Boxing",
],
selectedSports: []
}
},
methods: {
onSelect(event) {
this.selectedSports.push(event.itemData)
}
}
})
It will be shown like this: