How to introduce Excel table plug-in into Vue

npm install handsontable-pro @handsontable-pro/vue
npm install handsontable @handsontable/vue

import { HotTable } from '@handsontable-pro/vue'
import '…/…/node_modules/handsontable-pro/dist/handsontable.full.css'
import Handsontable from 'handsontable-pro'

<div id="hotTable" class="hotTable">
    <HotTable ref="hotTableComponent" :settings="hotSettings"></HotTable>
</div>

data () {
    return {
      list: [],
      root: 'test-hot',
      hotSettings: {
        data: [ // data can be a two-dimensional array or an array object],
        startRows: 3, // row and column range startCols: 3,
        minRows: 20, // Minimum number of rowsminCols: 5, // Minimum number of columnsmaxRows: 20, // Maximum number of rows and columnsmaxCols: 20, // Maximum number of columnsrowHeaders: true, // Row headers can be Boolean values ​​(row numbers), strings (the left row headers display the same content, and can parse HTML), or arrays (the left row headers display content separately).
        colHeaders: ['Account Level', 'Account Name', 'Account Number', 'Account Category'], // Custom column header or Boolean valueminSpareCols: 0, // Column blankminSpareRows: 0, // Row blankcurrentRowClassName: 'currentRow', // Add a class name for the selected row, you can change the stylecurrentColClassName: 'currentCol', // Add a class name for the selected columnautoWrapRow: true, // Automatic line wrapclassName: 'htCenter htMiddle', // Default cell style, vertical centercontextMenu: {
          items: {
            // 'row_above': {
            // name: 'Insert a row above'
            // },
            // 'row_below': {
            // name: 'Insert a row below'
            // },
            // 'col_left': {
            // name: 'Insert column to the left'
            // },
            // 'col_right': {
            // name: 'Insert column to the right'
            // },
            'hsep1': '---------', // Provide separator line 'remove_row': {
              name: 'Delete row'
            },
            'remove_col': {
              name: 'Delete column'
            },
            'make_read_only': {
              name: 'read-only'
            },
            'borders': {
              name: 'Table line'
            },
            'copy': {
              name: 'Copy'
            },
            'cut': {
              name: 'Cut'
            },
            'commentsAddEdit': {
              name: 'Add Notes'
            },
            'commentsRemove': {
              name: 'Cancel note'
            },
            'freeze_column': {
              name: 'Fixed columns'
            },
            'unfreeze_column': {
              name: 'Cancel column pinning'
            },
            'mergeCells': {
              name: 'Merge cells'
            },
            'alignment': {
              name: 'Text position'
            },
            'hsep2': '---------'
          }
        },
        afterChange: function (changes, source) { // This method is triggered when the data changes // console.log(this.getSourceData())
          this.list = this.getSourceData() // Get the data in the table // console.log(this.getPlugin('MergeCells').mergedCellsCollection.mergedCells) // Get the parameters of the merged cells in the table},
        manualColumnFreeze: true, // Manually fix columns?
        manualColumnMove: true, // Manually move columnsmanualRowMove: true, // Manually move rowsmanualColumnResize: true, // Manually change column spacingmanualRowResize: true, // Manually change row spacingcomments: true, // Add comments?
        // cell: [ // ???
        // {row: 1, col: 1, comment: {value: 'this is test'}}
        // ],
        customBorders: [], // Add borders columnSorting: true, // Sorting stretchH: 'all', // Expand horizontally according to width, last: only expand the last column, none: do not expand by default fillHandle: true, // Select and drag to copy possible values: true, false, "horizontal", "vertical"
        fixedColumnsLeft: 0, // Fixed the number of columns on the left fixedRowsTop: 0, // Fixed the number of columns on the top mergeCells: [ // Merge // {row: 1, col: 1, rowspan: 3, colspan: 3}, // Specify the merge, starting from (1,1), row 3 and column 3 are merged into one grid // {row: 3, col: 4, rowspan: 2, colspan: 2}
        ],
        columns: [ // Set the table header name {
            data: 'acctLevel'
          },
          {
            data: 'acctName'
          },
          {
            data: 'acctNo'
          },
          {
            data: 'acctType'
          },
        ]
      }
    }
  },

components:
    HotTable
 },

methods: {
    swapHotData: function () {
      // The Handsontable instance is stored under the `hotInstance` property of the wrapper component.
      // this.$refs.hotTableComponent.hotInstance.loadData([['new', 'data']])
      console.log(this.$refs.hotTableComponent.hotInstance.getPlugin('MergeCells').mergedCellsCollection.mergedCells)
    }
},

this.$refs.hotTableComponent.hotInstance // Get table data, call table method, ****** points to the table getPlugin('MergeCells').mergedCellsCollection.mergedCells) // Get the parameters needed after merging cells