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

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="[email protected]"
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="[email protected]"
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" }
    ]
  }