[Vuejs]-Vuetify.js: how to cancel v-stepper-step header click when active form is invalid

It’s a little bit unclear what you want to do exactly, but taking @click to the whole makes it so the headerCLick function behave exatly how it does when the click is on the label, yet you can click anywhere on the header (which I take for granted is what you mean by "the full clickable area").

  <v-stepper-header @click="headerClick">
    <template v-for="step in steps">
      <v-stepper-step :key="step.id" :step="step.id" :rules="[() => !!step.valid]" edit-icon="$complete" :complete="currentStepId > step.id" :editable="currentStepId !== step.id && currentStep.valid">
        <span class="v-stepper-step-clickable" v-html="step.name"></span>
      </v-stepper-step>
      <v-divider :key="`divider-${step.id}`" v-if="step.id < lastStep"></v-divider>
    </template>
  </v-stepper-header>