vue中如何在watch监听中新增tinymce的撤销？

tinymce.undoManager.add()
tinymce.undoManager.transact()

我知道以上两个命令是记录用户操作用于回滚的方法在我的项目中需要监听 App.vue 传递过来的值从而替换编辑器中的展示的文档（dom）所以我将 tinymce 运行在了 watch 中，代码如下：

<script setup>
import tinymce from 'tinymce/tinymce' // tinymce 默认 hidden，不引入则不显示编辑器
import Editor from '@tinymce/tinymce-vue'

watch(() => {
  return props.propChild
}, (val) => {
  console.log('子组件接收', val)
  switch (val.edit) {
    case 'click':
      tinymce.activeEditor.getBody().querySelector('#' + val.id).scrollIntoView()
      break
    case 'edit':
      tinymce.activeEditor.getBody().querySelector('#' + val.id).innerText = val.idName
      tinymce.undoManager.add()
      // tinymce.undoManager.transact()
      break
  }
}, {
  deep: true
})
</script>

但是在项目运行后，页面报错

tinymce.activeEditor.getBody().querySelector('#' + val.id).scrollIntoView() // 可以执行
tinymce.activeEditor.getBody().querySelector('#' + val.id).innerText = val.idName // 可以执行
tinymce.undoManager.add() // TypeError: Cannot read properties of undefined (reading 'add')
tinymce.undoManager.transact() // TypeError: Cannot read properties of undefined (reading 'transact')

请问是为什么呢？