Automatically set minutes to 00 after user selects hours in Bootstrap Vue Timepicker

When user opens timepicker, hours and minutes should be empty. As soon as they select the hours, it should automatically set the minutes to 00. Thank you in advance.

<b-form-timepicker 
    v-model="meditation.start.time"                     
    locale="en" 
    :state="meditation.start.status"
    class="m-1"
    now-button
    required                    
    @input="meditationTimeChange(meditation.start)"
    label-close-button="Close"
    label-no-time-selected="Start Time"                 
>
</b-form-timepicker>

data() {        
    return {
        meditation: {
            disabled: true,
            message: 'Enter Date/Time',
            start:
            {
                time: '',
                status: false,
            }

meditationTimeChange(id){
    if(id.time === ''){
        id.status = false;
    } else {    
        id.status = true;
    }
    this.meditationValid();
}

You can do it by using @context event which gets fired every time user clicks on one of the spinbuttons.

<b-form-timepicker 
    v-model="meditation.start.time"                     
    locale="en" 
    :state="meditation.start.status"
    class="m-1"
    now-button
    required                    
    @context="onContext"
    label-close-button="Close"
    label-no-time-selected="Start Time"                 
>
</b-form-timepicker>

onContext(ctx) {
  if(ctx.hours != null && ctx.minutes == null){
    this.meditation.start = `${ctx.hours}:00:00`
  }
}