Handsontable not immediately shown when inside Vuetify Stepper

Question

When placing the Handsontable HotTable component inside of a Vuetify Stepper the Handsontable is only visible after you click somewhere on the page. But if I place the HotTable component outside of the Stepper it would be shown immediately. It should be visible inside step 1 immediately.

To demonstrate this unexpected behavior I forked the Vuetify Stepper example on CodePen and added "handsontable" and "@handsontable/vue".

Vuetify Stepper with Handsontable on CodePen

<div id="app">
  <v-app id="inspire">
    <v-stepper v-model="e1">
      <v-stepper-header>
        <v-stepper-step :complete="e1 > 1" step="1">Name of step 1</v-stepper-step>
        <v-divider></v-divider>
        <v-stepper-step :complete="e1 > 2" step="2">Name of step 2</v-stepper-step>
        <v-divider></v-divider>
        <v-stepper-step step="3">Name of step 3</v-stepper-step>
      </v-stepper-header>
      <v-stepper-items>
        <v-stepper-content step="1">
          <v-card
            class="mb-5"
            color="grey lighten-1"
            height="200px"
          >
            <div id="hot-preview">
              <hot-table :settings="hotSettings"></hot-table>
            </div>
          </v-card>
          <v-btn
            color="primary"
            @click="e1 = 2"
          >
            Continue
          </v-btn>
          <v-btn flat>Cancel</v-btn>
        </v-stepper-content>
        <v-stepper-content step="2">
          <v-card
            class="mb-5"
            color="grey lighten-1"
            height="200px"
          ></v-card>
          <v-btn
            color="primary"
            @click="e1 = 3"
          >
            Continue
          </v-btn>
          <v-btn flat>Cancel</v-btn>
        </v-stepper-content>
        <v-stepper-content step="3">
          <v-card
            class="mb-5"
            color="grey lighten-1"
            height="200px"
          ></v-card>
          <v-btn
            color="primary"
            @click="e1 = 1"
          >
            Continue
          </v-btn>
          <v-btn flat>Cancel</v-btn>
        </v-stepper-content>
      </v-stepper-items>
    </v-stepper>
  </v-app>
</div>

---

new Vue({
  el: '#app',
  data () {
    return {
      e1: 0,
      hotSettings: {
        data: Handsontable.helper.createEmptySpreadsheetData(1, 8),
        colHeaders: true,
        rowHeaders: true
      }
    }
  },
  components: {
    HotTable
  }
});

Answer 1

I think the problem is because you initialize it before component is mounted.
Try to initialize it in mounted hook:

hotSettings: {
    data: null,

//...

mounted() {
    this.hotSettings.data = Handsontable.helper.createEmptySpreadsheetData(1, 8)
}