`HotTable puts an empty column at the beginning of the spreadsheet when calling the spreadsheet in vue3.

Above is the code I’m currently using in Vue3. Handsontable / HotTable loads a file that is in xlsx file format. But when loading the table HotTable puts an empty column at the beginning of the table. I am trying to prevent this behavior. I tried using some of the Handsontable parameters to no avail.

<template>
  <div class="table">
    <hot-table 
      ref="hotTableComponent"
      :data="data" :rowHeaders="true" :colHeaders="true" :autoColumnSize="true" 
      licenseKey="non-commercial-and-evaluation" v-bind:lineType="lineType" >
    </hot-table>
  </div>
</template>
  
  <script>
    // import { defineComponent } from 'vue';
    import { HotTable } from '@handsontable/vue3';
    import { registerAllModules, registerAllValidators } from 'handsontable/registry';
    import 'handsontable/dist/handsontable.full.css';
    import axios from 'axios';
  
    // register Handsontable's modules
    registerAllModules();
  
    // register Handsontable's validators
    registerAllValidators();

    export default ({
      name: 'SpreadSheet',
      components: {
        HotTable,
      },
      props: {
        lineType: {
          type: String,
          required: true
        }
      },
      data() {
        return {
          height:"auto",
          autoColumnSize:true,
          // copyPasteEnabled: true,
          licenseKey: 'non-commercial-and-evaluation',
        };
      },
      methods: {
        async loadSS(fileName, lineType) {
        const res = await axios.get(`http://localhost:5001/fileContent/${lineType}/?filename=` +   
        fileName);
          this.$refs.hotTableComponent.hotInstance.loadData(res.data);
        }
      },
    });
  </script>

  <style>
  .table {
    padding-left: 1px;
  `}
</style`>
```