*Expected behavior*Hi i Want to Implement mdb select in stepper step one with validation, is there some example or can somone help me ?

Actual behavior**not working **Resources (screenshots, code snippets etc.)

<template>
  <mdb-card class="indigo lighten-5 pb-5 ">
    <mdb-card-body>
      <mdb-stepper
        class="pt-5"
        buttons
        validation
        nextBtn="Weiter"
        prevBtn="Zurück"
        :validatedSteps="validatedSteps"
        @validate="validate"
      >
        <mdb-step name="Abmessung " slot="content" icon="pencil-ruler" :number="1">
          <h3 class="font-weight-bold pt-3 pl-0 my-4">
            <mdb-card-title>Abmessung</mdb-card-title>
          </h3>

             <mdb-row>
               <mdb-col sm="6">
                 <mdb-select @change="test()"  required v-model="form[0].validateOptions" 
  validation ref="validationSelect" />
               </mdb-col>
             </mdb-row>

        </mdb-step>
        <mdb-step name="Congiguration" slot="content" icon="sliders-h" :number="2">
          <h3 class="font-weight-bold pt-3 pl-0 my-4">
            <mdb-card-title>Company Information</mdb-card-title>
          </h3>
          <mdb-input required label="Kochfeld" v-model="form[1].company" />
          <mdb-input required label="Beckenseite" v-model="form[1].address" />
        </mdb-step>
        <mdb-step name="Terms and conditions" slot="content" icon="check" :number="3">
          <h3 class="font-weight-bold pt-3 pl-0 my-4">
            <mdb-card-title>Terms and conditions</mdb-card-title>
          </h3>
          <mdb-input
            type="checkbox"
            id="checkbox3"
            required
            v-model="form[2].condition"
            label="I agree to the terms and conditions"
          />
          <mdb-input type="checkbox" id="checkbox4" label="I want to receive newsletter" />
        </mdb-step>
      </mdb-stepper>
    </mdb-card-body>
  </mdb-card>
</template>
<script>
  import {
    mdbStepper,
    mdbStep,
    mdbInput,
    mdbCard,
    mdbCardBody,
    mdbCardTitle,
    mdbSelect,
    mdbBtn, mdbRow, mdbCol,
  } from "mdbvue";

  export default {
    components: {
      mdbStepper,
      mdbStep,
      mdbInput,
      mdbCard,
      mdbCardBody,
      mdbCardTitle,
      mdbSelect,
      mdbBtn,
      mdbRow,
      mdbCol,
    },
    data() {
      return {
        validatedSteps: {},
        form: [{
          width: '',
          validateOptions: [
          { text: 'Bitte Breite wählen', value: null, disabled: true, selected: true },
          { text: '90 cm ', value: '90' },
          { text: '100 cm', value: '100' },
          { text: '110 cm', value: '110' },
          { text: '120 cm', value: '120' },
          { text: '150 cm', value: '150' },
          { text: '160 cm', value: '160' },
          { text: '170 cm', value: '170' },
          { text: '180 cm', value: '180' }
        ]
        },
        {
          company: '',
          address: ''
        },
        {
          condition: false
        }
        ],

      };
    },
    methods: {
      checkForm(form) {
        return Object.keys(form).length === Object.keys(form)
          .filter(key => form[key].length > 0).length;
      },
      validate(e) {
        if (e === 3) {
          this.validatedSteps[e] = this.form[e - 1].condition;
        }
        else if (this.checkForm(this.form[e - 1])) {
          this.validatedSteps[e] = true;
        }
        else {
          this.validatedSteps[e] = false;
        }
      },
      test(){
        console.log('test')
        this.form[0].width='asd';


      }
    }
  };
  </script>