handsontable插件无法使用问题

我在配置选项里面写了，但是页面里无法使用

并且插件实例也获取不到

我使用的版本是最新版的12.1.3的handsontable

测试了下没问题啊，题主F12打开浏览器看报错了吗？

<template>
  <div>
    <input type="file" @change="daoru" />
    <hot-table :settings="hotSettings" ref="main"></hot-table>
  </div>
</template>
<script>
import { HotTable } from "@handsontable/vue";
import excel from "exceljs";
//import Handsontable from "handsontable";
export default {
  data() {
    return {
      hotSettings: {
        data: [],
        colHeaders: true,
        rowHeaders: true,
        width: 600,
        height: 300,
        licenseKey: "not-commercial-and-evaluation",
        selectionMode: "multiple",
        outsideClickDeselects: false,
        mergeCells: [],
        contentMenu: ["mergeCells"],
      },
    };
  },
  components: { HotTable },
  mounted() {},
  methods: {
    daoru(e) {
      const file = e.target.files[0];
      console.log(file);
      let reader = new FileReader();

      reader.onload = (e) => {
        let bter = e.target.result;
        const workbook = new excel.Workbook();
        workbook.xlsx.load(bter).then(() => {
          let worksheet = workbook.getWorksheet(1);
          worksheet.eachRow((e) => {
            this.hotSettings.data.push(e.values);
          });
        });
      };
      reader.readAsArrayBuffer(file);
    },
  },
};
</script>