ckEditor Error : editor-isreadonly-has-no-setter

I'm using ckeditor5 balloon block mode in nuxt project. I have used online builder and downloaded build files , add the build files to my project and importing them into my editor component and using it! the only problem that I have is that when the page loads , I get an error : editor-isreadonly-has-no-setter. I tried binding v-model to the editor but the value won't be updated! note : I have used ckeditor5 classic mode identical to the way that I'm using Balloon Block, donno really what's going on! this is my component :

<template>
  <ckeditor
    :id="id"
    v-bind="$attrs"
    :editor="BalloonBlock"
    :config="editorConfig"
    v-on="$listeners"
  />
</template>

<script>
let BalloonBlock
let CKEditor

if (process.client) {
  BalloonBlock = require('@/plugins/ckeditor/ckeditor')
  CKEditor = require('@ckeditor/ckeditor5-vue2')
} else {
  CKEditor = { component: { template: '<div></div>' } }
}

export default {
  name: 'CKEditor',

  components: {
    ckeditor: CKEditor.component,
  },

  props: {
    fillErr: {
      type: Boolean,
      default: false,
      required: false,
    },
    minHeight: {
      type: String,
      default: '350px',
      required: false,
    },
    label: {
      type: String,
      default: '',
      required: false,
    },
  },

  data() {
    return {
      classicEditor: BalloonBlock,
      editorConfig: {
        language: 'fa',
        contentsLangDirection: 'rtl',
      },
      editorElement: null,
      id: null,
    }
  },

  computed: {
    value() {
      return this.$attrs.value
    },
  },

  created() {
    this.id = this.uuidv4()
  },

  mounted() {
    if (!document.getElementById('editorFaTranslate')) {
      const faScript = document.createElement('script')
      faScript.setAttribute('charset', 'utf-8')
      faScript.setAttribute('type', 'text/js')
      faScript.setAttribute('id', 'editorFaTranslate')
      faScript.setAttribute(
        'src',
        require('@@/plugins/ckeditor/translations/fa.js')
      )
      document.head.appendChild(faScript)
    }

    const intervalId = setInterval(() => {
      const ckEditor = document.getElementById(this.id)
      if (ckEditor) {
        clearInterval(intervalId)
        this.editorElement = ckEditor
      }
    })
  },

  methods: {
    uuidv4() {
      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(
        /[xy]/g,
        function (c) {
          const r = (Math.random() * 16) | 0
          const v = c === 'x' ? r : (r & 0x3) | 0x8
          return v.toString(16)
        }
      )
    },
    insertTextAtTheEnd(text) {
      function findCorrectPosition(htmlStr) {
        const lastIndexOfHTMLTag = htmlStr.lastIndexOf('</')
        const lastUlTag = htmlStr.lastIndexOf('</ul>')
        const lastOlTag = htmlStr.lastIndexOf('</ol>')
        if (
          lastUlTag === lastIndexOfHTMLTag ||
          lastOlTag === lastIndexOfHTMLTag
        ) {
          const lastLiTag = htmlStr.lastIndexOf('</li>')
          return lastLiTag
        }
        return lastIndexOfHTMLTag
      }
      const currentString = this.value
      const correctIndex = findCorrectPosition(currentString)
      const firstHalf = currentString.substring(0, correctIndex)
      const secondHalf = currentString.substring(correctIndex)
      const newString = `${firstHalf}${text}${secondHalf}`
      this.$emit('input', newString)
    },
  },
}
</script>

I would welcome any idea!