Vee Validate, why is my setup not working as expected?

Hello everyone,

I'm trying to create some abstract components form a Quasar app that I'm making. The form classes are mostly from jeffrey's series. Except I need my app to work offline, hence the reason I'm using Vee Validate and not just simply returning laravel's validation errors.

This is my current setup:

// Create.vue
<template lang="html">
  <div class="card width-2of3">
    <div class="card-content column group">
      <input v-model="form.email"
        placeholder="Email"
        v-validate="'required|email'"
        name="email">
      <validation-errors field-name="email" :form-errors="errors"></validation-errors>

      <input v-model="form.password"
        placeholder="********"
        v-validate="'required'"
        name="password"
        password>
      <validation-errors field-name="password" :form-errors="errors"></validation-errors>

      <button class="primary" @click="authenticate()">Log In</button>

    </div>
  </div>
</template>

<script>
import auth from 'helpers/auth/auth';
import Form from 'helpers/forms/form';

export default {
  data() {
    return {
      form: new Form({
        email: '',
        password: ''
      })
    }
  },
}
</script>

<style lang="css">
</style>

The validation-errors component:

// validationErrors.vue
<template lang="html">
  <div class="form-errors" v-if="formErrors.has(fieldName)">
    <span class="text-red" v-for="error in formErrors.collect(fieldName)"><i>error_outline</i> {{error.msg}} </span>
  </div>
</template>

<script>
export default {
  props: ['formErrors', 'fieldName']
}
</script>

<style lang="css">
</style>

In theory this should work, I'm properly giving it the errors and showing it based on the errors.

Any idea's? Am I missing something?

Ohh, here's the documentation for VeeValidate:

http://vee-validate.logaretm.com/