Custom Header Buttons

[PostmansCat]

ISSUE

I am trying to have the wizard controls from the footer above in the header as well. Anyone have an idea how I could achieve this?

End result wanted:

<!-- Header Actions -->
<template slot="header" slot-scope="props">
       <div class="wizard-header-left">
           <wizard-button  v-if="props.activeTabIndex > 0 && !props.isLastStep" @click.native="props.prevTab()" :style="props.fillButtonStyle">Previous</wizard-button>
        </div>
        <div class="wizard-header-right">
          <wizard-button v-if="!props.isLastStep"@click.native="props.nextTab()" class="wizard-header-right" :style="props.fillButtonStyle">Next</wizard-button>
          
          <wizard-button v-else @click.native="alert('Done')" class="wizard-header-right finish-button" :style="props.fillButtonStyle">  {{props.isLastStep ? 'Done' : 'Next'}}</wizard-button>
        </div>
</template>

<!-- Tabs -->
<tab-content title="Personal details">
    My first tab content
  </tab-content>]

<!-- Footer Actions -->
<template slot="footer" slot-scope="props">
       <div class="wizard-footer-left">
           <wizard-button  v-if="props.activeTabIndex > 0 && !props.isLastStep" @click.native="props.prevTab()" :style="props.fillButtonStyle">Previous</wizard-button>
        </div>
        <div class="wizard-footer-right">
          <wizard-button v-if="!props.isLastStep"@click.native="props.nextTab()" class="wizard-footer-right" :style="props.fillButtonStyle">Next</wizard-button>
          
          <wizard-button v-else @click.native="alert('Done')" class="wizard-footer-right finish-button" :style="props.fillButtonStyle">  {{props.isLastStep ? 'Done' : 'Next'}}</wizard-button>
        </div>
</template>