vue.js - 子オブジェクトを変更するときに Vue.js がテンプレートを更新しない

Question

私はlaravel sparkを拡張しており、実際に送信する前に登録を検証したいと考えていました。

すべてのデータはサーバーから適切かつ正しく処理されますが、エラーはポップアップしません。

検証に使用されるコードは次のとおりです。

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]);
            });
        }
    }
};

その後、SparkForm を拡張し、これらのメソッドを追加しました (successes はエラーの単なるコピーであり、検証成功メッセージを表示するために使用されます)。

/**
 * 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);
    }
};

最後に、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];
    }
};

コンソールにはエラーは表示されず、ネットワーク タブには正しいメッセージが表示されます。また、応答コールバックなどのコンソール ログインを追加すると、実際のエラーまたは成功メッセージが表示されます。しかし、それらは画面上には描画されません。

完全を期すために、テンプレート ブレード ファイルの重要な内容を含めます。

@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

私が見逃している/忘れているものを見ている明るい心はありますか?