tinymce 编辑器自定义封装出现props传值延迟或者显示不出来的问题？有人遇到过类似的问题吗？

组件

<template>
        <textarea  :id="ids"  v-model="value"></textarea>
</template>

<script scoped>
const uploadFileUrl = '' // 请求地址

  import axios  from 'axios' 
    import  "./js/tinymce.min"
    import "./js/icons/default/icons.min.js";
    import "./js/themes/silver/theme.min.js";
    import   './js/ZH-CN.js'
    import "./js/plugins/image/plugin.min";
    import "./js/plugins/media/plugin.min";
    import "./js/plugins/table/plugin.min";
    import "./js/plugins/lists/plugin.min";
    import "./js/plugins/contextmenu/plugin.min";
    import "./js/plugins/wordcount/plugin.min";
    import "./js/plugins/colorpicker/plugin.min";
    import "./js/plugins/textcolor/plugin.min";
    import "./js/plugins/preview/plugin.min";
    import "./js/plugins/code/plugin.min";
    import "./js/plugins/link/plugin.min";
    import "./js/plugins/advlist/plugin.min";
    import "./js/plugins/codesample/plugin.min";
    import "./js/plugins/hr/plugin.min";
    import "./js/plugins/fullscreen/plugin.min";
    import "./js/plugins/textpattern/plugin.min";
    import "./js/plugins/searchreplace/plugin.min";
    import "./js/plugins/autolink/plugin.min";
    import "./js/plugins/directionality/plugin.min";
    import "./js/plugins/visualblocks/plugin.min";
    import "./js/plugins/visualchars/plugin.min";
    import "./js/plugins/template/plugin.min";
    import "./js/plugins/charmap/plugin.min";
    import "./js/plugins/nonbreaking/plugin.min";
    import "./js/plugins/insertdatetime/plugin.min";
    import "./js/plugins/imagetools/plugin.min";
    import "./js/plugins/autosave/plugin.min";
    import "./js/plugins/autoresize/plugin.min";
    import './js/skins/ui/oxide/skin.min'
    import './js/skins/ui/oxide/skin'
    import './js/skins/ui/oxide/content.min.css'
    import './js/skins/content/default/content.css'
    import './js/skins/ui/oxide/skin.css'

  export default { 
    props:  {modelValue:{type:String,default:''}},
    emits: ['update:modelValue'], 

 data() {
    return {
   ids:null,
 
   init: {
   language: "zh_CN",
   suffix: '.min',
   inline: false,
   // skin_url: "/static/tinymce/skins/ui/oxide",
   height: 270,
   min_height: 270,
   max_height: 570,
   toolbar_mode: "wrap",
 
   plugins:"preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr nonbreaking insertdatetime advlist lists wordcount imagetools textpattern autosave  autoresize ",
   toolbar:"code undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link codesample | alignleft aligncenter alignright alignjustify outdent indent  formatpainter | \
   styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \
   table image media charmap hr pagebreak insertdatetime |  fullscreen preview",
   content_style: "p {margin: 5px 0;}",
   fontsize_formats: "12px 14px 16px 18px 24px 36px 48px 56px 72px",
   font_formats:
     "微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;",
   branding: false,
    images_upload_handler: (blobInfo, success, failure) => {
   let config = {
              headers: {
                'Content-Type': 'multipart/form-data'
              }
            }
     const formData = new FormData()                     // 和后端协商后用formData格式进行传参
     formData.append('file', blobInfo.blob())
     axios.post(uploadFileUrl,formData,config).then(res=>{
         const img =   'https://www.zstzpt.com' +  res.data.data.url;
              success(img);
          })
      },
      init_instance_callback:(editor)=>{
        editor.on('Change', (e) => {
          console.log(`output->editor---`,editor)
            var content =  editor.getContent();
            this.value=content
        });
      }
    },
    }
 },

 computed: {
    value: {
      get(value) {
        return this.modelValue
      },
      set(value) {
        this.$emit('update:modelValue', value)
      }
    }
  },
created(){
  this.initTinymce()
},
unmounted(){
  tinymce?.remove({ selector: 'textarea#'+this.ids})
},
 
methods:{
    initTinymce() {
      this.ids='tinymce_'+new Date().getDate()+this.getRandomNum()
      this.$nextTick(()=>{
        tinymce.init({
              selector: 'textarea#'+this.ids,
              ... this.init
            });
      })
    }
,

    getRandomNum(min = 0, max = 10000000, count = 1) {
  var nums = []
  while (nums.length < count) {
    var random = Math.floor(Math.random() * (max - min + 1) + min)
    if (nums.indexOf(random) === -1) {
      nums.push(random)
    }
  }
  return nums
}
}
    }
</script>

<style>
  .textarea{
    width: 500px;
    height: 200px;
    border: 1rpx solid #fff;
  }
</style>
 

调用

环境： 框架：vue-element-plus-admin 目前唯一猜到的是 组件打开dialog之前已经加载完成所以显示不出来 希望大佬指点适合🙏🙏🙏🙏🙏🙏🙏