Vue.js 正在try 访问vutify中vselect(ItemProps)的嵌套json值

我试图在vutify中创建一个v-select组件，它从API获取数据并将其显示为选项，但奇怪的是，收到的json数据在对象中有一个对象，并且无法访问:(
以下是我的代码:

<template>
  <Comp v-model="trainer" class="mt-10 mb-20 text" />
</template>

<script>
  import Comp from './Comp.vue'
  export default {
    components: {
      Comp,
    },
    data() {
      return {
        trainer: '',
      }
    },
  }
</script>

下面是Comp组件:

<template>
  <v-select
    label=" trainer"
    v-model="selected"
    v-bind="$attrs"
    :item-props="itemProps"
    :items="items"
  ></v-select>
</template>

<script>
  export default {
    props: ['value'],
    data() {
      return {
        selected: this.value,
        items: [
          {
            id: 7,
            user: {
              first_name: 'john',
              last_name: 'Doe',
              phone_number: '0910087634',
              email: 'test@gmail.com',
            },
            specializations: null,
            bio: '  hello',
            image: '',
            birthdate: '2024-01-01',
            gender: 'male',
            experience_years: 7,
          },
        ],
      }
    },
    methods: {
      itemProps(item) {
        return {
          title: item.user.first_name,
          subtitle: item.id,
        }
      },
    },
    computed: {
      selected: {
        get() {
          return this.value
        },
        set(val) {
          this.$emit('input', val)
        },
      },
    },
  }
</script>

这部分代码运行良好:

itemProps(item) {
        return {
          title: item.bio,
          subtitle: item.id,
        }
      },

但是当你想通过item.user.first_name而不是item.bio的时候，它就会出错，我不知道. 以下是前playground名: