Handsettable не показывается сразу, когда внутри Vuetify Stepper

Question

При размещении компонента Handsontable HotTable внутри Vuetify Stepper, Handsontable отображается только после того, как вы щелкнете где-нибудь на странице. Но если я размещу компонент HotTable вне Stepper, он будет показан немедленно. Это должно быть видно внутри шага 1 немедленно.

Чтобы продемонстрировать это неожиданное поведение, я разветвлял пример Vuetify Stepper на CodePen и добавил "handsontable" и "@ handsontable / vue".

Vuetify Stepper с Handsontable на 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

Я думаю, что проблема в том, что вы инициализируете его перед монтированием компонента.
Попробуйте инициализировать его в смонтированном хуке:

hotSettings: {
    data: null,

//...

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