DOM 元素在 Vue 项目中变为 Null

Question

我正在编写代码打字机，但由于某种原因，该元素无缘无故地变成Null了我无法辨认的元素。我是 Vue 的新手并且知道这段代码是有效的，因为我之前在 Django/Python 的https://CodeSpent.dev（实时预览）上完成了这个，直到我确定学习更多前端框架很有价值。

所以我相信它与 Vue 处理渲染的方式有关，但我只有几个小时的学习时间并且不知道在哪里看这个。

这是代码：

  var codeBlock = document.getElementById('code')

  console.log(codeBlock)

  setTimeout(() => {

    new TypeIt(codeBlock, {

      strings: [codeSample],

      speed: 20

    }).go();

  }, 1000)

  setInterval(function () {

    const code = Prism.highlight(codeBlock.innerText, Prism.languages.python, 'python');

    document.getElementById('real-code').innerHTML = code;

  }, 10);

如果我们查看控制台，我们可以在第 23 行看到其中codeBlock显然不是 null，但是当我们尝试使用它时，它变成了null. 有什么突出的吗？