Javascript 在Electron app中将node pty和XtermJS与VueJS集成时出现问题

我试图在一个电子应用程序中集成和。我正在使用VueJS作为前端，希望在应用程序内部创建一个终端界面。那么，如何构造代码，以便将其用作如下组件：

我尝试了以下方法，但未能完全发挥作用

// Terminal.vue component.

<template>
  <v-container fluid class="pa-1">
    <div style="overflow-y:scroll!important" class="pa-1 black" id="terminal"></div>
  </v-container>
</template>

<script>
import "xterm/css/xterm.css";
import { Terminal } from "xterm";
import { FitAddon } from "xterm-addon-fit";

const os = require("os");
const pty = require("node-pty");

const shell = process.env[os.platform() === "win32" ? "COMSPEC" : "SHELL"];

const ptyProc = pty.spawn(shell, [], {
  name: "xterm-color",
  env: process.env
});

const term = new Terminal({
  rows: 40,
  experimentalCharAtlas: "dynamic"
});

const fitAddon = new FitAddon();

term.loadAddon(fitAddon);

export default {
  data() {
    return {
      term: null
    };
  },

  mounted() {
    console.log("entered");

    term.open(document.getElementById("terminal"));

    fitAddon.fit();

    term.onData(data => ptyProc.write(data));
    ptyProc.on("data", function(data) {
      console.log(data);
      term.write(data);
    });

    term.onResize(size => {
      ptyProc.resize(
        Math.max(size ? size.cols : term.cols, 1),
        Math.max(size ? size.rows : term.rows, 1)
      );
    });

    console.log("exiting...");
  }
};
</script>

下图显示了上述代码的结果，这是一个没有vuejs的不同项目。

那么我如何才能让它在vuejs中工作呢

---

刚刚开始学习VueJS和web内容，如果有明显的问题，请原谅。

在ReactJS中找到了所需组件的实现。不确定如何将其转换为VueJS组件。谢谢你的帮助。

const {Terminal} = require('xterm');
const os = require('os');
const pty = require('node-pty');
const {FitAddon} = require('xterm-addon-fit');

const shell = process.env[os.platform() === 'win32' ? 'COMSPEC' : 'SHELL'];

const ptyProc = pty.spawn(shell, [], {
    name: 'xterm-color',
    env: process.env
});

const term = new Terminal({
    experimentalCharAtlas: 'dynamic',
    rows: 42
});

const fitAddon = new FitAddon();

term.loadAddon(fitAddon);
term.open(document.getElementById('opt1-panel'));
fitAddon.fit();

term.onData(data => ptyProc.write(data));
ptyProc.on('data', function(data){
    term.write(data);
});

term.onResize(size => {
    ptyProc.resize(
        Math.max(size ? size.cols : term.cols, 1),
        Math.max(size ? size.rows : term.rows, 1)
    );
});