Handsontable example

HTML

<div id="example1" class="hot">
  <hot-table :root="root" :settings="hotSettings"></hot-table>
  <button @click="onDataChange">
      Load Data
  </button>
</div>

CSS

</style><!-- Ugly Hack due to jsFiddle issue -->

<script src="https://docs.handsontable.com/pro/5.0.0/components/handsontable-pro/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://docs.handsontable.com/pro/5.0.0/components/handsontable-pro/dist/handsontable.full.min.css">
<script src="https://docs.handsontable.com/pro/5.0.0/scripts/jsfiddle-fixer.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@handsontable-pro/[email protected]/vue-handsontable-pro.min.js"></script>

Babel + JSX

import Vue from 'vue';
  import HotTable from '@handsontable-pro/vue';
  import Handsontable from 'handsontable-pro';
  
  new Vue({
    el: '#example1',
    data: {
      root: 'test-hot',
      hotSettings: {
        data: Handsontable.helper.createSpreadsheetData(6, 10),
        colHeaders: true,
        rowHeaders: true,
        manualRowMove: true,
        manualColumnMove: true,
        contextMenu: true,
        filters: true,
        dropdownMenu: true,
        columnSorting: true,
        sortIndicator: true,
        autoColumnSize: {
          samplingRatio: 23
        },
        fixedRowsTop: 2,
        fixedColumnsLeft: 3,
        mergeCells: true,
      }
    },
    components: {
      HotTable
    },
    methods: {
      onDataChange() {
          this.hotSettings.data = Handsontable.helper.createSpreadsheetData(8, 12);
      }
    }
  });