CK Editor 5 built from source + Vue JS + Using component locally = duplicated - vue.js

Question

I have a set of components in my page like this:
BlogEntryPointComponent that contains NewBlogComponent and BlogEditComponent
both NewBlogComponent and BlogEditComponent use the following code:
import BlogEditor from '../../../../js/ckeditor/blogeditor.ts'
export default {
components:{
ckeditor: BlogEditor.ckeditor
},
data(){
return{
editor: BlogEditor.editor,
editorConfig: BlogEditor.config
}
},
...
so now I mount BlogEntryPointComponent but the problem is that this is causing error ckeditor-duplicated-modules: Some CKEditor 5 modules are duplicated
The error page help talks about using two different builds on one page; I guess I am in this case... but those are are two different independent components; how can this be ?
So I tried building the editor from source as per what the doc recommends and I have the same problem..
the editor is the same imported file in both components.
here is the editor:
import EssentialsPlugin from '#ckeditor/ckeditor5-essentials/src/essentials';
import UploadAdapterPlugin from '#ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter';
import AutoformatPlugin from '#ckeditor/ckeditor5-autoformat/src/autoformat';
import BoldPlugin from '#ckeditor/ckeditor5-basic-styles/src/bold';
import ItalicPlugin from '#ckeditor/ckeditor5-basic-styles/src/italic';
import BlockQuotePlugin from '#ckeditor/ckeditor5-block-quote/src/blockquote';
import HeadingPlugin from '#ckeditor/ckeditor5-heading/src/heading';
import LinkPlugin from '#ckeditor/ckeditor5-link/src/link';
import ListPlugin from '#ckeditor/ckeditor5-list/src/list';
import ParagraphPlugin from '#ckeditor/ckeditor5-paragraph/src/paragraph';
import AlignmentPlugin from '#ckeditor/ckeditor5-alignment/src/alignment';
import EmbedPlugin from '#ckeditor/ckeditor5-media-embed/src/mediaembed';
import MentionPlugin from '#ckeditor/ckeditor5-mention/src/mention';
import HighlightPlugin from '#ckeditor/ckeditor5-highlight/src/highlight'
import ClassicEditorBase from '#ckeditor/ckeditor5-editor- classic/src/classiceditor';
import CKEditor from '#ckeditor/ckeditor5-vue/dist/ckeditor.js'
export default {
ckeditor: CKEditor.component,
editor:ClassicEditorBase,
config:{
plugins: [
EssentialsPlugin,
BoldPlugin,
ItalicPlugin,
LinkPlugin,
ParagraphPlugin,
AlignmentPlugin,
ListPlugin,
HeadingPlugin,
BlockQuotePlugin,
AutoformatPlugin,
UploadAdapterPlugin,
EmbedPlugin,
MentionPlugin,
HighlightPlugin
],
toolbar: {
items: [
'heading',
'|',
'bold',
'italic',
'alignment',
'link',
'bulletedList',
'numberedList',
'mediaEmbed',
'blockQuote',
'highlight',
'undo',
'redo'
]
}
}
}
package.json
{
"devDependencies": {
"#babel/core": "^7.0.0",
"#babel/preset-env": "^7.4.5",
"#babel/preset-typescript": "^7.1.0",
"#babel/register": "^7.0.0",
"#ckeditor/ckeditor5-adapter-ckfinder": "^11.0.1",
"#ckeditor/ckeditor5-alignment": "^11.1.0",
"#ckeditor/ckeditor5-autoformat": "^11.0.1",
"#ckeditor/ckeditor5-basic-styles": "^11.1.0",
"#ckeditor/ckeditor5-block-quote": "^11.0.1",
"#ckeditor/ckeditor5-dev-utils": "^12.0.1",
"#ckeditor/ckeditor5-dev-webpack-plugin": "^8.0.1",
"#ckeditor/ckeditor5-easy-image": "^11.0.1",
"#ckeditor/ckeditor5-editor-classic": "^12.1.0",
"#ckeditor/ckeditor5-essentials": "^11.0.1",
"#ckeditor/ckeditor5-heading": "^11.0.1",
"#ckeditor/ckeditor5-image": "^13.0.1",
"#ckeditor/ckeditor5-link": "^11.0.1",
"#ckeditor/ckeditor5-list": "^12.0.1",
"#ckeditor/ckeditor5-paragraph": "^11.0.1",
"#ckeditor/ckeditor5-theme-lark": "^13.0.1",
"#ckeditor/ckeditor5-undo": "^11.0.1",
"#types/jquery": "^3.3.22",
"babel-loader": "^8.0.4",
"clean-webpack-plugin": "^0.1.19",
"copy-webpack-plugin": "^4.5.4",
"css-loader": "^2.1.0",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "^2.0.0",
"html-webpack-plugin": "^3.2.0",
"imports-loader": "^0.8.0",
"jquery": "^3.3.1",
"less-loader": "^4.1.0",
"mini-css-extract-plugin": "^0.7.0",
"node-sass": "^4.12.0",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"sass-loader": "^7.1.0",
"select2": "^4.0.6-rc.1",
"style-loader": "^0.23.1",
"terser-webpack-plugin": "^1.3.0",
"to-string-loader": "^1.1.5",
"toastr": "^2.1.4",
"ts-loader": "^5.2.2",
"tslint": "^5.11.0",
"typescript": "^3.1.3",
"url-loader": "^1.1.2",
"vue-cool-select": "^1.6.2",
"vue-loader": "^15.6.1",
"vue-select": "2.4.0",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.5.22",
"webpack": "^4.32.2",
"webpack-cli": "^3.1.2",
"webpack-manifest-plugin": "^2.0.4",
"webpack-notifier": "^1.7.0",
"write-file-webpack-plugin": "^4.4.1"
},
"dependencies": {
"#ckeditor/ckeditor5-build-classic": "^12.1.0",
"#ckeditor/ckeditor5-build-decoupled-document": "^12.1.0",
"#ckeditor/ckeditor5-highlight": "^11.0.1",
"#ckeditor/ckeditor5-media-embed": "^11.1.0",
"#ckeditor/ckeditor5-mention": "^10.0.0",
"#ckeditor/ckeditor5-vue": "^1.0.0-beta.2",
"axios": "^0.19.0",
"moment": "^2.24.0",
"postcss-loader": "^3.0.0",
"pretty-checkbox-vue": "^1.1.9",
"raw-loader": "^0.5.1",
"svg-url-loader": "^2.3.2",
"vue": "^2.5.22",
"vue-date-pick": "^1.1.0",
"vue-router": "^3.0.2",
"vuelayers": "^0.11.4"
}

Answer 1

What I did is I updated all the packages related to ckeditor5 and added #ckeditor/ckeditor5-ui#latest
When I updated all the packages related to ck5editor I encounred this new multiple errors
plugincollection-plugin-name-conflict through duplicate.....
https://github.com/ckeditor/ckeditor5/issues/1505
so I deleted the node_modules and package.lock or yarn.lock and npm install again
Most probably the cause of the errors is if you have newer version of some plugins and also have older version, it will return an error since it seems you are using both the new and old version or you can't use newer version of plugins with older version of core plugins