I have same issue in Vue js 3 ! any update ?

<template>
  <div>
    <CKEditor.component v-model="editorData" :config="TaskEditorConfig" :editor="editor"></CKEditor.component>

    <div>
      <strong>Editor Output:</strong>
      <div>{{ editorData }}</div>
    </div>
  </div>
</template>

<script setup>
import CKEditor from '@ckeditor/ckeditor5-vue';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import { computed, ref } from 'vue';

// Function to fetch mentions
const getMentionFeed = computed(() => (queryText) => {
  if (!queryText) return [];
  const users = [
    { id: '1', name: 'Alice' },
    { id: '2', name: 'Bob' },
    { id: '3', name: 'Charlie' }
  ];
  return users.filter((user) => user.name.toLowerCase().includes(queryText.toLowerCase())).map((user) => `@${user.name}`);
});

// Custom rendering of mention items in the dropdown
const mentionItemRenderer = computed(() => (item) => {
  const itemElement = document.createElement('span');
  itemElement.textContent = item;
  itemElement.className = 'mention-item';
  return itemElement;
});

// CKEditor configuration
const TaskEditorConfig = computed(() => ({
  toolbar: ['undo', 'redo', 'heading', 'bold', 'italic', 'numberedList', 'bulletedList', 'blockQuote'],
  mention: {
    feeds: [
      {
        marker: '@',
        feed: getMentionFeed.value, // Pass the function reference
        itemRenderer: mentionItemRenderer.value // Pass the function reference
      }
    ]
  }
}));

// Reactive editor data
const editorData = ref('');
const editor = ClassicEditor;
</script>

<style>
.mention-item {
  padding: 5px 10px !important;
  cursor: pointer !important;
}

.mention-item:hover {
  background-color: #f0f0f0 !important;
}
</style>

My packages:

  "@ckeditor/ckeditor5-build-classic": "41.3.0",
    "@ckeditor/ckeditor5-vue": "5.1.0",
    "ckeditor5": "^44.1.0",