CKEditor In Vue3 - CKEditorError: ckeditor-duplicated-modules Error

Question

Here I am trying to use the CK Editor in vue3, my goal is to add the Html Support

I installed the ckeditor by following document

npm install --save @ckeditor/ckeditor5-vue @ckeditor/ckeditor5-build-classic

and installed the document

npm install --save @ckeditor/ckeditor5-html-support

and added it as plugin but it's giving error

code which I written

<ckeditor :editor="editor" :disabled="editorDisabled" v-model="editorData" :config="editorConfig" @input="handlerChange"></ckeditor>

import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
import { GeneralHtmlSupport } from "@ckeditor/ckeditor5-html-support";
export default {
    data() {
        return {
            editor: ClassicEditor,
            editorData: "<p>Content of the editor.gg</p>",
            editorDisabled: false,
            editorConfig: {
                plugin: [GeneralHtmlSupport],
                toolbar: ["heading", "fontFamily", "sourceEditing", "|", "bold", "|", "italic", "link", "bulletedList", "numberedList", "blockQuote"],
                heading: {
                    options: [
                        { model: "paragraph", title: "Paragraph", class: "ck-heading_paragraph" },
                        { model: "heading1", view: "h1", title: "Heading 1", class: "ck-heading_heading1" },
                        { model: "heading2", view: "h2", title: "Heading 2", class: "ck-heading_heading2" },
                        { model: "heading3", view: "h3", title: "Heading 3", class: "ck-heading_heading3" }
                    ]
                },
                fontFamily: {
                    options: ["default", "Ubuntu, Arial, sans-serif", "Ubuntu Mono, Courier New, Courier, monospace"]
                },
                allowedContent: true,
                htmlSupport: {
                    allow: [
                        {
                            name: /.*/,
                            attributes: true,
                            classes: true,
                            styles: true
                        }
                    ]
                }
            },
            style: {},
            toolbar: "custom",
            content: "",
            code: ""
        };
    },

and other methods...

Pcakge.json

"dependencies": {
        "@babel/eslint-parser": "^7.17.0",
        "@ckeditor/ckeditor5-build-classic": "^40.1.0",
        "@ckeditor/ckeditor5-html-support": "^40.1.0",
        "@ckeditor/ckeditor5-source-editing": "^40.1.0",
        "@ckeditor/ckeditor5-vue": "^5.1.0",
        "@vueup/vue-quill": "^1.1.1",
        "axios": "^0.26.0",
        "codemirror": "^5.65.16",
        "codemirror-editor-vue3": "^2.4.1",
        "core-js": "^3.21.1",
        "quill-image-drop-module": "^1.0.3",
        "quill-image-resize-module": "^3.0.0",
        "quill-image-uploader": "^1.3.0",
        "vue": "^3.2.31",
        "vue-final-modal": "^3.4.3",
        "vue-router": "^4.0.12",
        "vuex": "^4.0.2",
        "zip-webpack-plugin": "^4.0.1"
    },

I want to enable the feature through which I can see the html shource code, directly I can paste that code.

I saw one one help link which says version should be same for all @ckeditor which is already 40.1.0, so don't know what to do.