How to set the content of first row as headers ?

<template>
  <v-container>
    <div @drop="_drop" @dragenter="_suppress" @dragover="_suppress">
      <input
        type="file"
        class="form-control"
        id="file"
        :accept="SheetJSFT"
        @change="_change"
      />

      <v-btn :disabled="data.length ? false : true" @click="_export">
        Export
      </v-btn>

      <table class="table table-striped">
        <thead>
          <tr>
            <th v-for="c in cols" :key="c.key">{{ c.name }}</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(r, key) in data" :key="key">
            <td v-for="c in cols" :key="c.key">{{ r[c.key] }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </v-container>
</template>

<script>
import XLSX from 'xlsx'
const make_cols = (refstr) =>
  Array(XLSX.utils.decode_range(refstr).e.c + 1)
    .fill(0)
    .map((x, i) => ({ name: XLSX.utils.encode_col(i), key: i }))
const _SheetJSFT = [
  'xlsx',
  'xlsb',
  'xlsm',
  'xls',
  'xml',
  'csv',
  'txt',
  'ods',
  'fods',
  'uos',
  'sylk',
  'dif',
  'dbf',
  'prn',
  'qpw',
  '123',
  'wb*',
  'wq*',
  'html',
  'htm',
]
  .map(function (x) {
    return '.' + x
  })
  .join(',')
export default {
  data() {
    return {
      data: ['SheetJS'.split(''), '1234567'.split('')],
      cols: [
        { name: 'A', key: 0 },
        { name: 'B', key: 1 },
        { name: 'C', key: 2 },
        { name: 'D', key: 3 },
        { name: 'E', key: 4 },
        { name: 'F', key: 5 },
        { name: 'G', key: 6 },
      ],
      SheetJSFT: '.xlsx',
    }
  },
  methods: {
    _suppress(evt) {
      evt.stopPropagation()
      evt.preventDefault()
    },
    _drop(evt) {
      evt.stopPropagation()
      evt.preventDefault()
      const files = evt.dataTransfer.files
      if (files && files[0]) this._file(files[0])
    },
    _change(evt) {
      const files = evt.target.files
      if (files && files[0]) this._file(files[0])
    },
    _export(evt) {
      /* convert state to workbook */
      const ws = XLSX.utils.aoa_to_sheet(this.data)
      const wb = XLSX.utils.book_new()
      XLSX.utils.book_append_sheet(wb, ws, 'SheetJS')
      /* generate file and send to client */
      XLSX.writeFile(wb, 'sheetjs.xlsx')
    },
    _file(file) {
      /* Boilerplate to set up FileReader */
      const reader = new FileReader()
      reader.onload = (e) => {
        /* Parse data */
        const ab = e.target.result
        const wb = XLSX.read(new Uint8Array(ab), { type: 'array' })
        /* Get first worksheet */
        const wsname = wb.SheetNames[0]
        const ws = wb.Sheets[wsname]
        /* Convert array of arrays */
        const data = XLSX.utils.sheet_to_json(ws, { header: 1, range: 1 })
        /* Update state */
        const data = XLSX.utils.sheet_to_json(ws, { header: 1 })
        /* Update state */
        this.data = data
        this.cols = make_cols(ws['!ref'])
      }
      reader.readAsArrayBuffer(file)
    },
  },
}
</script>