What is the correct way to use the props of a locally imported vue-ckeditor5 component in Vue.js?

Question

CKEditor

Good afternoon!
Using the vue-ckeditor5 component for ckeditor5 in Vue.js 2.
Declared the component locally in a separate cked.vue file

<template>
  <div>
    <vue-ckeditor type="classic" v-model="content"
      :editors="editors1"
      :toolbar-container="toolbar"
      :config="conf">
    </vue-ckeditor>
  </div>
</template>

<script>

import ClassicEditor from '@ckeditor/ckeditor5-build-classic'
import VueCkeditor from 'vue-ckeditor5'

export default {
  components: { 'vue-ckeditor': VueCkeditor.component },
  data () {
    return {
      content: 'hello',
      editors1: {
        classic: ClassicEditor
      },
      toolbar: 'bold',
      conf: { language: 'ru' }
    }
  }
}
</script>

The component works, displays and reacts more precisely:

But! In props, I passed
toolbar: 'bold',
conf: { language: 'ru' } ,
which should have left only B in the toolbar panel and made the interface language Russian.
But this did not happen .. I can not understand what's wrong. The second day I fight about this seemingly simple task. I couldn't find an answer on the Internet, so I came to you for help.
Here is a link to the vue-ckeditor5 documentation that I used https://www.npmjs.com/package/vue-ckeditor5 ckeditor5 itself, namely vue-ckeditor5, because tried communicating and configuring ckeditor5 directly without vue-ckeditor5. (
https://github.com/drone076/vue2-ckeditor5/blob/ma...
And everything worked out, I was able to customize the toolbar.
I also tried to change the default values ​​of the passed props in vue-ckeditor5.js itself. For example, I changed the same { language: 'en' } to { language: 'ru' }. But the component also did not react in any way.
Installed the component via npm:
npm install vue-ckeditor5
npm install --save @ckeditor/ckeditor5-build-balloon @ckeditor/ckeditor5-build-classic
I also tried declaring components globally in main.js exactly according to the documentation => effect with settings none.
I feel that somewhere there is a very small snag with the setting or use, but I don’t see it ..
I would be grateful for any help or hint!

Answer 1

toolbarContainer - CSS-selector of DOM-element for CKEditor toolbar. The element is searched by Document.querySelector()

Judging by the documentation , the toolbarContainer is needed to attach the toolbar to a specific element via querySelector, and to configure the toolbar itself, you need to use config .
And if you try like this:

<template>
  <div>
    <vue-ckeditor
      v-model="content"
      :editors="editors1"
      :config="conf"
      type="classic"
    />
  </div>
</template>

<script>
import ClassicEditor from '@ckeditor/ckeditor5-build-classic'
import VueCkeditor from 'vue-ckeditor5'

export default {
  components: { 'vue-ckeditor': VueCkeditor.component },
  data () {
    return {
      content: 'hello',
      editors1: {
        classic: ClassicEditor
      },
      conf: {
        language: 'ru',
        toolbar: [ 'bold' ],
      }
    }
  }
}
</script>

The language is not yet clear, but there is an assumption that you simply did not connect it .