this is my q-stepper code :
<template>
<q-page >
<div class="q-pa-md">
<q-stepper flat ref="stepper" v-model="step" color="primary" :alternative-labels="alt" :contractable="contractable">
<q-step default name="suitabilityassessment" title="Suitability Assessment">
<SAT></SAT>
<q-stepper-navigation v-if="!globalNavigation">
<q-btn color="primary" @click="$refs.stepper.goToStep('suitabilityassessment')">Calculate</q-btn>
<q-btn class="q-ml-sm" color="primary" @click="$refs.stepper.next()">Continue</q-btn>
</q-stepper-navigation>
</q-step>
<q-step name="applicantsetails" title="Applicant Details" subtitle="">
<AD></AD>
<q-stepper-navigation v-if="!globalNavigation">
<q-btn class="q-ml-sm" color="primary" flat @click="$refs.stepper.previous()">Back</q-btn>
<q-btn color="primary" @click="$refs.stepper.next()">Continue</q-btn>
</q-stepper-navigation>
</q-step>
<q-step name="employment details" title="Employment Details" subtitle="">
<ED></ED>
<q-stepper-navigation v-if="!globalNavigation">
<q-btn class="q-ml-sm" color="primary" flat @click="$refs.stepper.previous()">Back</q-btn>
<q-btn color="primary" @click="$refs.stepper.next()">Continue</q-btn>
</q-stepper-navigation>
</q-step>
<q-step name="fatca" title="FATCA">
<FATCA></FATCA>
<q-stepper-navigation v-if="!globalNavigation">
<q-btn class="q-ml-sm" color="primary" flat @click="$refs.stepper.previous()">Back</q-btn>
<q-btn color="primary" @click="$refs.stepper.next()">Continue</q-btn>
</q-stepper-navigation>
</q-step>
<q-step name="fundinvestment" title="Fund Investment" subtitle="">
<FI></FI>
<q-stepper-navigation v-if="!globalNavigation">
<q-btn class="q-ml-sm" color="primary" flat @click="$refs.stepper.previous()">Back</q-btn>
<q-btn color="primary" @click="$refs.stepper.next()">Continue</q-btn>
</q-stepper-navigation>
</q-step>
<q-step name="payment" icon="account_balance_wallet" title="Payment">
<p>Payment -- To be continued</p>
<q-stepper-navigation v-if="!globalNavigation">
<q-btn class="q-ml-sm" color="primary" flat @click="$refs.stepper.previous()">Back</q-btn>
<q-btn color="primary" @click="$refs.stepper.next()">Continue</q-btn>
</q-stepper-navigation>
</q-step>
<q-stepper-navigation v-if="globalNavigation">
<q-btn
v-if="step !== 'suitabilityassessment'"
color="primary"
flat
@click="$refs.stepper.previous()"
>
Back
</q-btn>
<q-btn class="q-ml-sm" color="primary" @click="$refs.stepper.next()">
{{ step === 'payment' ? 'Finalize' : 'Next' }}
</q-btn>
</q-stepper-navigation>
<q-inner-loading :visible="progress" />
</q-stepper>
</div>
</q-page>
</template>
the data table is located at Fund Investment, where I call components as I shared previously.