<ks-step-through
    ref="steps"
    :steps="['Create Idea', 'Build Idea', 'Profit']"
    v-model="step"
    :allow-interaction="true"
></ks-step-through>

<div class="basic-block">
    <div v-if="step == 1" class="t-center">
        <p>
            This is step one
        </p>
        <button @click.prevent="$refs.steps.completeStep()">Complete Step 1</button>
    </div>
    <div v-if="step == 2" class="t-center">
        <p>
            Step 2 is a little different
        </p>
        <button @click.prevent="$refs.steps.completeStep()">Complete Step 2</button>
    </div>
    <div v-if="step == 3" class="t-center">
        <p>
            Step 3 Profit!
        </p>
        <button @click.prevent="$refs.steps.completeStep()">Complete Step 3</button>
    </div>
    <div v-if="step > 3" class="t-center">
        <strong>Success!</strong>
    </div>
</div>