How to show suggested users in Tiptap mention node

Question

I wanted to create an editor using Tiptap, Laravel and Livewire. I already implemented the editor and image upload. However, I'm unable to use successfully create the mention feature.

Here's the editor.js

import { Editor } from '@tiptap/core';
....
import Mention from "@tiptap/extension-mention";
import axios from "axios";

window.setupEditor = function (content) {
    return {
        editor: null,
        content: content,

        init(element) {
            this.editor = new Editor({
                editorProps: {
                    attributes: {
                        class: "prose max-w-none focus:outline-none min-h-[165px]",
                        id: "form-editor",
                    },
                },
                element: element,
                extensions: [
                    Document,
                    Paragraph,
                    Text,
                    Bold,
                    Italic,
                    Underline,
                    BulletList,
                    ListItem,
                    Link.configure({
                        openOnClick: false,
                    }),
                    Image.configure({
                        inline: true,
                        HTMLAttributes: {
                            class: 'max-w-[50%]',
                        }
                    }),
                    Youtube.configure({
                        nocookie: true,
                        height: 350,
                        width: 500,
                    }),
                    CodeBlock,
                    ImageUpload,
                    Mention.configure({
                        HTMLAttributes: {
                            class: 'mention',
                        },
                        suggestion: {
                            char: '@',
                            startOfLine: true,
                            allowSpaces: false,
                            items: ({query}) => {
                                //check if query string is at least 4 characters
                                if (query.length < 4) {
                                    return [];
                                }

                                axios.get('users?key=' + query)
                                    .then(res => {
                                        console.log(res.data); //need to show the data in the frontend.
                                    })
                                    .catch(err => {
                                        console.log(err);
                                    })
                            },
                        },
                    }),
                ],
                content: this.content,
                onUpdate: ({ editor }) => {
                    this.content = editor.getHTML()
                }
            })

            this.$watch('content', (content) => {
                // If the new content matches TipTap's then we just skip.
                if (content === this.editor.getHTML()) return

                /*
                  Otherwise, it means that a force external to TipTap
                  is modifying the data on this Alpine component,
                  which could be Livewire itself.
                  In this case, we just need to update TipTap's
                  content and we're good to do.
                  For more information on the `setContent()` method, see:
                    https://www.tiptap.dev/api/commands/set-content
                */
                this.editor.commands.setContent(content, false)
            })
        },
    }
}

I successfully fetched the users based on the @. However, I'm unable to show it in the front end.