解决vue-codemirror编辑器需要点击一下才显示数据问题

bug描述：codemirror的数据已经赋值成功了，但是初始状态不渲染数据，需要点击编辑框获取焦点后才展示，如下

 

 百度了很多答案都是：设置一个setTimeout延时手动刷新下

<codemirror 
    v-model="value" 
    :options="cmOption" 
    ref="myCodemirror">
</codemirror>


setTimeout(() => {
    
    this.$refs.myCodemirror.refresh()
    
}, 1)

这样的确在组件正常的显示的情况下是有效果的，但是我是多步骤多codemirror 编辑器，并且有父组件嵌套子组件嵌套子组件子组件.....这让我如何一个个遍历去手动刷新呢？？？页面如下：第一个步骤默认是打开的，所以渲染正常，不用点一下才显示，但是后面的步骤默认都是关闭！父组件控制（v-show）也是就是元素是display:none

 所以让我一个个手动刷新是不可能了，原来。。。有自动刷新！上代码

<codemirror 
    v-model="value" 
    :options="cmOption" 
    ref="myCodemirror">
</codemirror>
------------------------------------------------
// 引入自动刷新
import 'codemirror/addon/display/autorefresh'

data () {
  return {
    cmOption: {
        autoRefresh: true, // 重点是这句，为true
        scrollbarStyle: null,
        mode: 'text/x-java',
        theme: 'eclipse',
        autofocus: false,
        readOnly: false,
        lineNumbers: true, 
        smartIndent: true,
        autoCloseBrackets: true
        
   }
}

搞定~