Vue.js not updating template when changing child objects

Question

I'm extending laravel spark and wanted to try to validate registration before actually sending it off.

All data is handled nicely and correctly from the server but the errors do not pop-up.

The code being used for validation is as following:

module.exports = {
    ...
    methods: {
        ...
        validate(field, value) {
            var formData = {
                field: field,
                value: value
            };

            var form = new SparkForm(formData);

            Spark.post('/register_validate', form).then(response => {
                this.registerForm.addSuccess(field);
            }).catch(errors => {
                this.registerForm.addError(field, errors[field]);
            });
        }
    }
};

After, i extended SparkForm and added these methods (successes is just a copy of errors, used to display validation success messages):

/**
 * SparkForm helper class. Used to set common properties on all forms.
 */
window.SparkForm = function (data) {
    ...

    this.addError = function(field, errors) {
        form.successes.remove(field);
        form.errors.add(field, errors);
    },

    this.addSuccess = function(field) {
        form.errors.remove(field);
        form.successes.add(field, true);
    }
};

And finally i added some methods on the SparkFormErrors.

/**
 * Spark form error collection class.
 */
window.SparkFormErrors = function () {
    ...

    this.add = function(field, errors) {
        this.errors[field] = errors;
    };

    this.remove = function(field) {
        delete this.errors[field];
    }
};

In the console no errors are shown and in the network tab i can see the correct messages coming true, also when i add a console log in for example the response callback i can see the actual errors or success messages. But they are not drawn on screen.

For completeness i'll include the important content of the template blade file:

@extends('spark::layouts.app')
@section('content')
  <spark-register-stripe inline-template>
    <!-- Basic Profile -->
    <div class="row">
      <div class="col-md-8 col-md-offset-2">
        <div class="panel panel-default">
          <div class="panel-heading">
            {{ trans('auth.register.title') }}
          </div>
          <div class="panel-body">
            <!-- Generic Error Message -->
            <div class="alert alert-danger" v-if="registerForm.errors.has('form')">
              @{{ registerForm.errors.get('form') }}
            </div>
            <!-- Registration Form -->
            <form class="form-horizontal" role="form">
              <!-- Name -->
              <div class="form-group" :class="{'has-error': registerForm.errors.has('name')}">
                <label class="col-md-4 control-label">{{ trans('user.name') }}</label>
                <div class="col-md-6">
                  <input type="name" class="form-control" name="name" v-model="registerForm.name" autofocus @blur="validate('name', registerForm.name)">
                  <span class="help-block" v-show="registerForm.errors.has('name')">
                    @{{ registerForm.errors.get('name') }}
                  </span>
                </div>
              </div>
              <!-- E-Mail Address -->
                <div class="form-group" :class="{'has-error': registerForm.errors.has('email')}">
                  <label class="col-md-4 control-label">{{ trans('user.email') }}</label>
                  <div class="col-md-6">
                    <input type="email" class="form-control" name="email" v-model="registerForm.email" @blur="validate('email', registerForm.email)">
                    <span class="help-block" v-show="registerForm.errors.has('email')">
                      @{{ registerForm.errors.get('email') }}
                    </span>
                  </div>
                </div>
                <!-- Password -->
                <div class="form-group" :class="{'has-error': registerForm.errors.has('password')}">
                  <label class="col-md-4 control-label">{{ trans('user.password') }}</label>
                  <div class="col-md-6">
                    <input type="password" class="form-control" name="password" v-model="registerForm.password" @blur="validate('password', registerForm.password)">
                    <span class="help-block" v-show="registerForm.errors.has('password')">
                      @{{ registerForm.errors.get('password') }}
                    </span>
                  </div>
                </div>
                <div class="form-group">
                  <div class="col-md-6 col-md-offset-4">
                    <button class="btn btn-primary" @click.prevent="register" :disabled="registerForm.busy">
                      <span v-if="registerForm.busy">
                        <i class="fa fa-btn fa-spinner fa-spin"></i>{{ trans('auth.register.submitting') }}
                      </span>
                      <span v-else>
                        <i class="fa fa-btn fa-check-circle"></i>{{ trans('auth.register.submit') }}
                      </span>
                    </button>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </spark-register-stripe>
@endsection

Any bright mind seeing what i'm missing/forgetting?