vueform/multiselect not working as a single file component - vue.js

Question

I'm getting really strange errors while trying to implement vueform/multiselect. Most of the examples that I have found do not use single-file components and that's the approach I want to take. I'm trying to import the MultiSelect component into another component called 'AgentDetails'. I'm using VUE-CLI and VUE 3.
CustomSelect.vue
<template>
<div>
<Multiselect v-model="value" :options="options" />
</div>
</template>
<script>
import Multiselect from "#vueform/multiselect";
export default {
components: {
Multiselect
},
data() {
return {
value: "Batman",
options: ["Batman", "Robin", "Joker"]
};
}
};
</script>
<style src="#vueform/multiselect/themes/default.css"></style>
AgentDetails.vue (here's where I want to insert the CustomSelect component)
<template>
<CustomSelect />
</template>
<script>
import { mapState, mapActions } from "vuex";
import CustomSelect from "#/components/CustomSelect.vue";
export default {
components: {
CustomSelect
}
};
</script>
I keep getting these errors:
execution of setup function at <Multiselect modelValue=null
onUpdate:modelValue=fn options= (3) ["Batman", "Robin", "Joker"] >
at <CustomSelect> at <AgentDetails> at <AgentDetails
agentEmail="alexandra.blanco#rubiko.tech"
onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< null > > at
<RouterView> at <App> warn # runtime-core.esm-bundler.js?5c40:38
logError # runtime-core.esm-bundler.js?5c40:211 handleError #
runtime-core.esm-bundler.js?5c40:203 callWithErrorHandling #
runtime-core.esm-bundler.js?5c40:157 setupStatefulComponent #
runtime-core.esm-bundler.js?5c40:6224 setupComponent #
runtime-core.esm-bundler.js?5c40:6185 mountComponent #
runtime-core.esm-bundler.js?5c40:3960 processComponent #
runtime-core.esm-bundler.js?5c40:3936 patch #
runtime-core.esm-bundler.js?5c40:3547 mountChildren #
runtime-core.esm-bundler.js?5c40:3736 mountElement #
runtime-core.esm-bundler.js?5c40:3659 processElement #
runtime-core.esm-bundler.js?5c40:3631 patch #
runtime-core.esm-bundler.js?5c40:3544 componentEffect #
runtime-core.esm-bundler.js?5c40:4053 reactiveEffect #
reactivity.esm-bundler.js?a1e9:42 effect #
reactivity.esm-bundler.js?a1e9:17 setupRenderEffect #
runtime-core.esm-bundler.js?5c40:4018 mountComponent #
runtime-core.esm-bundler.js?5c40:3976 processComponent #
runtime-core.esm-bundler.js?5c40:3936 patch #
runtime-core.esm-bundler.js?5c40:3547 mountChildren #
runtime-core.esm-bundler.js?5c40:3736 mountElement #
runtime-core.esm-bundler.js?5c40:3659 processElement #
runtime-core.esm-bundler.js?5c40:3631 patch #
runtime-core.esm-bundler.js?5c40:3544 mountChildren #
runtime-core.esm-bundler.js?5c40:3736 mountElement #
runtime-core.esm-bundler.js?5c40:3659 processElement #
runtime-core.esm-bundler.js?5c40:3631 patch #
runtime-core.esm-bundler.js?5c40:3544 mountChildren #
runtime-core.esm-bundler.js?5c40:3736 mountElement #
runtime-core.esm-bundler.js?5c40:3659 processElement #
runtime-core.esm-bundler.js?5c40:3631 patch #
runtime-core.esm-bundler.js?5c40:3544 mountChildren #
runtime-core.esm-bundler.js?5c40:3736 mountElement #
runtime-core.esm-bundler.js?5c40:3659 processElement #
runtime-core.esm-bundler.js?5c40:3631 patch #
runtime-core.esm-bundler.js?5c40:3544 mountChildren #
runtime-core.esm-bundler.js?5c40:3736 mountElement #
runtime-core.esm-bundler.js?5c40:3659 processElement #
runtime-core.esm-bundler.js?5c40:3631 patch #
runtime-core.esm-bundler.js?5c40:3544 mountChildren #
runtime-core.esm-bundler.js?5c40:3736 mountElement #
runtime-core.esm-bundler.js?5c40:3659 processElement #
runtime-core.esm-bundler.js?5c40:3631 patch #
runtime-core.esm-bundler.js?5c40:3544 componentEffect #
runtime-core.esm-bundler.js?5c40:4053 reactiveEffect #
reactivity.esm-bundler.js?a1e9:42 effect #
reactivity.esm-bundler.js?a1e9:17 setupRenderEffect #
runtime-core.esm-bundler.js?5c40:4018 mountComponent #
runtime-core.esm-bundler.js?5c40:3976 processComponent #
runtime-core.esm-bundler.js?5c40:3936 patch #
runtime-core.esm-bundler.js?5c40:3547 mountChildren #
runtime-core.esm-bundler.js?5c40:3736 mountElement #
runtime-core.esm-bundler.js?5c40:3659 processElement #
runtime-core.esm-bundler.js?5c40:3631 patch #
runtime-core.esm-bundler.js?5c40:3544 componentEffect #
runtime-core.esm-bundler.js?5c40:4053 reactiveEffect #
reactivity.esm-bundler.js?a1e9:42 effect #
reactivity.esm-bundler.js?a1e9:17 setupRenderEffect #
runtime-core.esm-bundler.js?5c40:4018 mountComponent #
runtime-core.esm-bundler.js?5c40:3976 processComponent #
runtime-core.esm-bundler.js?5c40:3936 patch #
runtime-core.esm-bundler.js?5c40:3547 componentEffect #
runtime-core.esm-bundler.js?5c40:4117 reactiveEffect #
reactivity.esm-bundler.js?a1e9:42 callWithErrorHandling #
runtime-core.esm-bundler.js?5c40:154 flushJobs #
runtime-core.esm-bundler.js?5c40:364 Promise.then (async) queueFlush #
runtime-core.esm-bundler.js?5c40:264 queueJob #
runtime-core.esm-bundler.js?5c40:258 run #
reactivity.esm-bundler.js?a1e9:183 trigger #
reactivity.esm-bundler.js?a1e9:189 set value #
reactivity.esm-bundler.js?a1e9:721 finalizeNavigation #
vue-router.esm-bundler.js?6c02:2585 eval #
vue-router.esm-bundler.js?6c02:2458 Promise.then (async)
pushWithRedirect # vue-router.esm-bundler.js?6c02:2429 push #
vue-router.esm-bundler.js?6c02:2369 navigate #
vue-router.esm-bundler.js?6c02:1997 callWithErrorHandling #
runtime-core.esm-bundler.js?5c40:154 callWithAsyncErrorHandling #
runtime-core.esm-bundler.js?5c40:163 invoker #
runtime-dom.esm-bundler.js?830f:292 Show 36 more frames
runtime-core.esm-bundler.js?5c40:38 [Vue warn]: Unhandled error during
execution of scheduler flush. This is likely a Vue internals bug.
Please open an issue at
https://new-issue.vuejs.org/?repo=vuejs/vue-next at <Multiselect
modelValue=null onUpdate:modelValue=fn options= (3) ["Batman",
"Robin", "Joker"] > at <CustomSelect> at <AgentDetails> at
<AgentDetails agentEmail="alexandra.blanco#rubiko.tech"
onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< null > > at
<RouterView> at <App> warn # runtime-core.esm-bundler.js?5c40:38
logError # runtime-core.esm-bundler.js?5c40:211 handleError #
runtime-core.esm-bundler.js?5c40:203 callWithErrorHandling #
runtime-core.esm-bundler.js?5c40:157 flushJobs #
runtime-core.esm-bundler.js?5c40:364 Promise.then (async) queueFlush #
runtime-core.esm-bundler.js?5c40:264 queueJob #
runtime-core.esm-bundler.js?5c40:258 run #
reactivity.esm-bundler.js?a1e9:183 trigger #
reactivity.esm-bundler.js?a1e9:189 set value #
reactivity.esm-bundler.js?a1e9:721 finalizeNavigation #
vue-router.esm-bundler.js?6c02:2585 eval #
vue-router.esm-bundler.js?6c02:2458 Promise.then (async)
pushWithRedirect # vue-router.esm-bundler.js?6c02:2429 push #
vue-router.esm-bundler.js?6c02:2369 navigate #
vue-router.esm-bundler.js?6c02:1997 callWithErrorHandling #
runtime-core.esm-bundler.js?5c40:154 callWithAsyncErrorHandling #
runtime-core.esm-bundler.js?5c40:163 invoker #
runtime-dom.esm-bundler.js?830f:292 multiselect.js?a306:1 Uncaught (in
promise) TypeError: Cannot read property 'value' of undefined
at re (multiselect.js?a306:1)
at q (multiselect.js?a306:1)
at setup (multiselect.js?a306:1)
at callWithErrorHandling (runtime-core.esm-bundler.js?5c40:154)
at setupStatefulComponent (runtime-core.esm-bundler.js?5c40:6224)
at setupComponent (runtime-core.esm-bundler.js?5c40:6185)
at mountComponent (runtime-core.esm-bundler.js?5c40:3960)
at processComponent (runtime-core.esm-bundler.js?5c40:3936)
at patch (runtime-core.esm-bundler.js?5c40:3547)
at mountChildren (runtime-core.esm-bundler.js?5c40:3736)```

Answer 1

Ok figure out what was happening, in order for the multi-select to work you need to have a particular object structure on the component data, if not Vue won't instantiate the component and you will get a lot of weird errors, here's an example:
options: {
value: [],
options: [
{ value: "batman", label: "Batman" },
{ value: "robin", label: "Robin" },
{ value: "joker", label: "Joker" }
]
}