CodeMirror.MergeView使用中的问题？

Question

下面是用diff-match-patch和codemirror的写的一个文本对比的组件，就是展示用户修改某段文本内容后能显示“修改前”和“修改后”的对比，我现在有一个问题，下面是封装的组件，每次点击父组件的按钮他相当于重新创建了，所以就有建了一个对象，下面就会不断的增加这种框框，怎么修改使唤只有一个对象？

<template>
  <div>
    <div ref="codeMirrorRef" class="code-contrast" style="width: 100%; height: 100%"></div>
  </div>
</template>

<script setup lang="tsx">
import { ref, onMounted, watch } from 'vue'
import CodeMirror from 'codemirror'
import 'codemirror/lib/codemirror.css'
import 'codemirror/addon/merge/merge.js'
import 'codemirror/addon/merge/merge.css'
import DiffMatchPatch from 'diff-match-patch'

// 全局变量（如果CodeMirror需要）
;(window as any).diff_match_patch = DiffMatchPatch
;(window as any).DIFF_DELETE = -1
;(window as any).DIFF_INSERT = 1
;(window as any).DIFF_EQUAL = 0

const props = defineProps({
  oldvalue: {
    type: String,
    default: '无'
  },
  newvalue: {
    type: String,
    default: '无'
  },
  isreadonly: {
    type: Boolean,
    default: false
  }
})

const codeMirrorRef = ref<HTMLElement | null>(null)
const initCodeMirrorUI = () => {
  CodeMirror.MergeView(codeMirrorRef.value, {
    value: props.oldvalue,
    origLeft: null,
    orig: props.newvalue,
    lineNumbers: false,
    mode: 'text/html',
    highlightDifferences: true,
    connect: 'align',
    readOnly: props.isreadonly
  })
}
onMounted(() => {})
watch(
  () => props.oldvalue,
  async (oldvalue) => {
    console.log('值值值值值值值值值值值值值值值')
    console.log(oldvalue)
    initCodeMirrorUI()
  },
  {
    deep: true,
    immediate: true
  }
)
</script>

<style scoped lang="less">
.code-contrast .CodeMirror-merge-copy,
.code-contrast .CodeMirror-merge-scrolllock-wrap {
  display: none !important;
}
</style>