Got @undefined in Vue3

[claide]

Hi, I tried to add this on our project using Nuxt3.

"vue-mention": "^2.0.0-alpha.3" and "floating-vue": "^2.0.0-beta.24",

When I select a suggestion from the popover, it becomes @undefined.

here's my code

<script setup>
import { Mentionable } from 'vue-mention'
import 'floating-vue/dist/style.css'

const props = defineProps({
  taskId: {
    type: Number,
    required: true,
  },
  taskMembers: {
    type: Array,
    required: true,
  },
  user: {
    type: Object,
    required: true,
  },
})

const message = ref('')
const members = ref(props.taskMembers)
</script>

<Mentionable :keys="['@']" :items="members" placement="bottom" insert-space>
  <ElementsAppTextarea
    id="comment"
    v-model="message"
    name="comment"
    placeholder="Type @ to mention and notify member."
  />

  <template #no-result>
    <div class="p-1 text-sm">No result</div>
  </template>

  <template #item="{ item }">
    <span class="text-sm"> @{{ item.name }} </span>
  </template>
</Mentionable>