Vue3 组件中不可用的 Props

我在 Twig 模板中有这个：

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

以及执行挂载的 js 文件：

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,
       }
    });
});

它将正确的值输出到控制台。

页面上确实呈现了组件，但显示“无可用数据”。控制台中输出的是空字符串或数组。

这是该组件的代码。

<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>

所以看起来组件中的 props 没有被正确拾取。这是为什么呢？