[Vuejs]-Vuelidate TypeError with axios

This looks like a bug in Vuelidate’s logic. The docs for $error state…

Equivalent to this.$dirty && !this.$pending && this.$invalid.

However in testing it doesn’t appear to honour the $pending state.

This means that while your async validator is running, $error can be true and $errors can be empty.

A simple work-around for this is to use a different condition for rendering the error block…

<p v-if="v$.username.$errors.length" class="red--text">
  {{ v$.username.$errors[0].$message }}
</p>

Issue raised with Vuelidate here ~ https://github.com/vuelidate/vuelidate/issues/1046