Django Vue.js - выпадающий список с множественным выбором для рендеринга

Я пытаюсь использовать компонент множественного выбора Vue.js: https://vue-multiselect.js.org/

К сожалению, он не отображается должным образом. Вместо раскрывающегося списка множественного выбора я получаю что-то вроде этого:

Используемый код:

HTML:

<div id = "app">
  <button @click = "toggle">open and close later
  </button>
    <pre>{{ isOpen }}</pre>
    <multiselect
        ref = "multiselect"
        v-model = "value"
        :options = "options"
        :multiple = "true"
        track-by = "library"
        :custom-label = "customLabel"
        @close = "isOpen = false"
        @open = "isOpen = true"
    >
  </multiselect>
</div>

Используемые библиотеки (включены в):

<script src = "https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.min.js"></script>
<script src = "https://unpkg.com/[email protected]"></script>
<link rel = "stylesheet" href = "https://unpkg.com/[email protected]/dist/vue-multiselect.min.css">

Используемый скрипт (размещен внизу страницы):

<script>
        new Vue({
        components: {
        Multiselect: window.VueMultiselect.default
        },
        data: {
        isOpen: false,
        value: { language: 'JavaScript', library: 'Vue-Multiselect' },
        options: [
            {   language: 'JavaScript', library: 'Vue.js' },
          { language: 'JavaScript', library: 'Vue-Multiselect' },
          { language: 'JavaScript', library: 'Vuelidate' }
        ]
        },
      methods: {
        customLabel (option) {
          return `${option.library} - ${option.language}`
        },
        toggle () {
          this.$refs.multiselect.$el.focus()

          setTimeout(() => {
            this.$refs.multiselect.$refs.search.blur()
          }, 400)
        }
      }
    }).$mount('#app')
</script>