I can't get it to work

[developer992]

Would love to use this, Probably doing something wrong, am not too good with vuejs. I am trying to follow the tutorial.

App.vue

<template>
    <h2>Example</h2>

    <h3>List Options</h3>
    <v-multiselect-listbox :options="['Alabama', 'California']"></v-multiselect-listbox>


    <v-multiselect-listbox :options="[{label: 'Alabama', code: 'al'}, {label: 'California', code: 'cal'}]"
                           :reduce-display-property="(option) => option.label"
                           :reduce-value-property="(option) => option.code">
    </v-multiselect-listbox>

    <h3>Group List options</h3>
    <v-multiselect-listbox :options="[{label: 'Alabama', code: 'al', group: 'US'}, {label: 'California', code: 'cal', group: 'US'}, {label: 'British Columbia', code: 'bc', group: 'Canada'}]"
                           :reduce-display-property="(option) => option.label"
                           :reduce-value-property="(option) => option.code"
                           :reduce-group-property="(option) => option.group">
    </v-multiselect-listbox>

    <h3>Select/Deselect All Buttons</h3>
    <v-multiselect-listbox :options="[{label: 'Alabama', code: 'al'}, {label: 'California', code: 'cal'}]"
                           :reduce-display-property="(option) => option.label"
                           :reduce-value-property="(option) => option.code"
                           :show-select-all-buttons="false">
    </v-multiselect-listbox>

    <h3>Highlight Difference from the original input</h3>
    <v-multiselect-listbox :options="[{label: 'Alabama', code: 'al'}, {label: 'California', code: 'cal'}]"
                           :reduce-display-property="(option) => option.label"
                           :reduce-value-property="(option) => option.code"
                           search-input-class="custom-input-class"
                           highlight-diff>
    </v-multiselect-listbox>

    <h3>Search Input Placeholder</h3>
    <v-multiselect-listbox :options="[{label: 'Alabama', code: 'al'}, {label: 'California', code: 'cal'}]"
                           :reduce-display-property="(option) => option.label"
                           :reduce-value-property="(option) => option.code"
                           search-options-placeholder="Search states"
                           selected-options-placeholder="Search selected states">
    </v-multiselect-listbox>

    <h3>Empty Listbox Placeholder</h3>
    <v-multiselect-listbox :options="[{label: 'Alabama', code: 'al'}, {label: 'California', code: 'cal'}]"
                           :reduce-display-property="(option) => option.label"
                           :reduce-value-property="(option) => option.code"
                           no-options-text="No states"
                           selected-no-options-text="No states selected">
    </v-multiselect-listbox>

    <h3>Empty Search Placeholder</h3>
    <v-multiselect-listbox :options="[{label: 'Alabama', code: 'al'}, {label: 'California', code: 'cal'}]"
                           :reduce-display-property="(option) => option.label"
                           :reduce-value-property="(option) => option.code"
                           no-options-found-text="No state found"
                           no-selected-options-found-text="No selected state found">
    </v-multiselect-listbox>

    <h3>Hide Search Input</h3>
    <v-multiselect-listbox :options="[{label: 'Alabama', code: 'al'}, {label: 'California', code: 'cal'}]"
                           :reduce-display-property="(option) => option.label"
                           :reduce-value-property="(option) => option.code"
                           no-options-found-text="No state found"
                           no-selected-options-found-text="No selected state found"
                           hide-search-inputs>
    </v-multiselect-listbox>

    <h3>Style Search Input</h3>
    <v-multiselect-listbox :options="[{label: 'Alabama', code: 'al'}, {label: 'California', code: 'cal'}]"
                           :reduce-display-property="(option) => option.label"
                           :reduce-value-property="(option) => option.code"
                           search-input-class="custom-input-class">
    </v-multiselect-listbox>


</template>

<script>
import vMultiselectListbox from 'vue-multiselect-listbox'
import 'vue-multiselect-listbox/dist/vue-multi-select-listbox.css';

export default {
  name: 'Paste-test',
  components: { 'v-multiselect-listbox': vMultiselectListbox },
  data () {
    return {
      selected: '',
      options: ['10001', '10002', '10003', '10004', '10005', '10006', '10007', '10008', '10009', '10010'],
    }
  },
  methods: {
    parse_clipboard(content) {
        var arr = content.split(/[\s,]+/)
        var trimmed = '';
        var results = arr.filter(element => {
            trimmed = element.trim();

            if (trimmed.length) {
                return trimmed;
            }
        });

        return results
    },

    handlePaste(evt) {
        var data = evt.clipboardData.getData('text/plain');
        console.log('TwoPaneMultiSelect pasted data=', data);

        evt.preventDefault();

        var parsed_data = this.parse_clipboard(data);
        console.log('TwoPaneMultiSelect parsed_data=', parsed_data);

        this.options = parsed_data;
        this.selected = parsed_data;
    }
  }
}
</script>

main.js

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

All it renders it this:

And this error in the console:

I am using vuejs3.

Thanks!