Vue.js Multiselect component error : Property or method "isOpen" is not defined on the instance but referenced during render

Question

I'm facing with a common vue error but I can't find any solution to fix it. I'm calling a Multiselect component and I get lot of errors :

[Vue warn]: Property or method "isOpen" is not defined on the instance but referenced during render....
Property or method "tabindex" is not defined on the instance but referenced during render...
Property or method "handleInputMousedown" is not defined on the instance but referenced during render...
Property or method "open" is not defined on the instance but referenced during render...

I imported and my component :

import Multiselect from '@vueform/multiselect/dist/multiselect.vue2.js'
import '@vueform/multiselect/themes/default.css'

and I added in my components:

components: {
    Multiselect
},

Then I called it :

<Multiselect
   v-model="datas.phase.data"
   :options="datas.phase.items"
/>

I checked all my datas variables and there is no error.

I can't figured out why I get all these errors. IMPORTANT : same calls in other components work fine.

Answer 1

These errors occur when the Vue 2 Composition API plugin is not initialized in your app, as required by the @vueform/multiselect docs.

To resolve the issue, ensure you've installed the plugin (e.g., in main.js):

import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'

Vue.use(VueCompositionAPI)