How show error in Quasar Stepper when required field is empty

Pelote

Hi,
I create a stepper and in each step I’ve several field. Some are required. I Want show error on right panel to easier research error

<div id="q-app">
  <div class="q-pa-md">
    <q-btn label="Reset" push color="white" text-color="primary" @click="reset" class="q-mb-md"></q-btn>

    <q-stepper
      v-model="step"
      header-nav
      ref="stepper"
      color="primary"
      animated
      
    >
      <q-step
        :name="1"
        title="Select campaign settings"
        icon="settings"
        :done="done1"
        :error="checkform1()"
      > <q-form ref="myForm" class="q-gutter-md" >
        <q-input
           v-model="firstName"
           :rules="[val => !!val || 'First name is required']"        
          />
 </q-form>
        <q-stepper-navigation>
          <q-btn @click="() => { done1 = true; step = 2 }" color="primary" label="Continue"></q-btn>
        </q-stepper-navigation>
      </q-step>

      <q-step
        :name="2"
        title="Create an ad group"
        caption="Optional"
        icon="create_new_folder"
        :done="done2"
      >
        An ad group contains one or more ads which target a shared set of keywords.

        <q-stepper-navigation>
          <q-btn @click="() => { done2 = true; step = 3 }" color="primary" label="Continue"></q-btn>
          <q-btn flat @click="step = 1" color="primary" label="Back" class="q-ml-sm"></q-btn>
        </q-stepper-navigation>
      </q-step>

      <q-step
        :name="3"
        title="Create an ad"
        icon="add_comment"
        :done="done3"
      >
        Try out different ad text to see what brings in the most customers, and learn how to
        enhance your ads using features like ad extensions. If you run into any problems with
        your ads, find out how to tell if they're running and how to resolve approval issues.

        <q-stepper-navigation>
          <q-btn color="primary" @click="done3 = true" label="Finish"></q-btn>
          <q-btn flat @click="step = 2" color="primary" label="Back" class="q-ml-sm"></q-btn>
        </q-stepper-navigation>
      </q-step>
    </q-stepper>
  </div>
</div>

and my code

new Vue({
  el: '#q-app',
  data () {
    return {
      step: 1,
      done1: false,
      done2: false,
      done3: false,
       firstName: ''
    }
  },

  methods: {
    reset () {
      this.done1 = false
      this.done2 = false
      this.done3 = false
      this.step = 1
    },
    checkform1() {
     if (this.$refs.myForm) {
        this.$refs.myForm.validate().then((result) => {
          return !result;
        });
      } else {
        return false;
      }
    } //this.step<3; 
  }
})

I put an esemple on codepen

It’s no working but I don’t understand why. Thnaks for your guidance

Pelote

@Pelote I make a big step using @before-transition and a data. But now my problem is q-form in a specific step exist only when I’m on my step. If I pass from step1 to step 3 I can’t check myform2 like u can see there