Props not available in Vue3 component

I have this in a Twig template:

<div
    class="multiSelect"
    id="{{ id }}"
    data-options="{{ options|json_encode }}"
    data-field="{{ handle }}"
>
    <div class="selectComponent"></div>
</div>

and the js file which does the mounting:

multiSelects.forEach((el) => {
   const component = el.querySelector('.selectComponent');
   const options = el.dataset.options || '[]';
   const field = el.dataset.field || '';
   console.log('Field before mounting:', field);
   console.log('Items before mounting:', options);
   const multiSelect = createApp(MultiSelect);
   multiSelect.use(vuetify).mount(component, {
       props: {
           items: options,
           field: field,
       }
    });
});

which outputs the correct value to the console.

And on the page, the component does render, but it says 'No data available'. And in the console it outputs an empty string or array.

This is the code for the component.

<template>
  <v-select
    v-model="selectedvalue"
    :items="items"
    :name="field"
    item-text="title"
    item-value="id"
    label=""
    chips
    multiple
  ></v-select>
</template>

<script>
  export default {
    props: {
      items: {
        type: Array,
        default: () => []
      },
      field: {
        type: String,
        default: ''
      }
    },
    data() {
      console.log('After mounting items:', this.items);
      console.log('After mounting field:', this.field);
      return {
        selectedvalue: [],
      }
    }
  }
</script>

So it seems like the props aren't being picked up properly in the component. Why is that?

Root component props are supposed to be the second parameter of createApp(), not mount(). See the documentation for reference. The object you're passing in is also incorrect. Remove the props key. It should only be the prop key-value pairs.

const multiSelect = createApp(MultiSelect, {
  items: options,
  field: field,
});
multiSelect.use(vuetify).mount(component);