Form Validation (vue.js)

I am an beginner with vue.js. I want to build a little App for learning. I stuck with the thing to check the length of a password field:

const app = new Vue({
el: '#app',
data: {
errors: [],
vorname: null,
nachname: null,
email: null,
password1: null,
password2: null
},
methods: {
checkForm: function (e) {
  this.errors = [];

  if (!this.vorname) {
    this.errors.push("Bitte Vornamen eingeben.");
  }
  if (!this.nachname) {
    this.errors.push("Bitte den Nachnamen eingen.");
  }
  if (!this.email) {
    this.errors.push('Bitte E-Mail eingeben.');
  } else if (!this.validEmail(this.email)) {
    this.errors.push('Es wird eine valide E-Mail-Adresse benötigt.');
  }
  if (!this.password1) {
    this.errors.push("Bitte geben Sie ein Passwort an.");
  }
  if (!this.password1.length < 8) {
    this.errors.push("Das Password muss mindestens 8 Zeichen lang sein.");  
  } 

  if (!this.errors.length) {
    return true;
  }

  e.preventDefault();
},
validEmail: function (email) {
  var re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  return re.test(email);
}
}})

The HTML:

<form
        id="app"
        @submit="checkForm"
        action="test.php"
        method="post"
      >
  <div class="modal-body">
    
      
        <div class="row spacer-sm">
          <div class="col">
            <input class="form-control" placeholder="Vorname" aria-label="Vorname"

            id="vorname"
            v-model="vorname"
            type="text"
            name="vorname"
          >

          </div>
          <div class="col">
            <input class="form-control" placeholder="Nachname" aria-label="Nachname"

            id="nachname"
            v-model="nachname"
            type="text"
            name="nachname"
            >


          </div>
        </div>

        <div class="row spacer-sm">
          <div class="col">
            <input class="form-control" placeholder="E-Mail-Adresse" aria-label="E-Mail-Adresse"

            id="email"
            v-model="email"
            type="email"
            name="email"
            >


          </div>
          <div class="col">
            
          </div>
        </div>
        <hr>
        <div class="row spacer-sm">
          <div class="col">
            <input  class="form-control spacer-sm" placeholder="Passwort" aria-label="Passwort"
            id="password1"
            v-model="password1"
            type="password"
            name="password1"
            >
            <input class="form-control" placeholder="Passwort wiederholen" aria-label="Passwort"
            id="password2"
            v-model="password2"
            type="password"
            name="password2"
            >
          </div>
          <div class="col">
            <div id="passwordHelpBlock" class="form-text">
              Das Passwort muss 8-20 Zeichen lang sein. Es muss Buchstaben und Zahlen enthalten.
            </div>
            
          </div>
        </div>
        <hr>
        <div class="alert alert-danger fade show" v-if="errors.length">
          <b>Bitte korigieren Sie folgenden Fehler:</b>
          <ul>
            <li v-for="error in errors">{{ error }}</li>
          </ul>
          
        </div>

        
      

  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary" data-dismiss="modal">Abbrechen</button>
    <button type="submit" class="btn btn-primary" value="Submit">Speichern</button>
  </div>
</form>

The error that it have less than 8 characters appears every time. No matter how characters it has. I searched the documentation but I can't finde anything. Even when I try

password1.value.length

it does not work.