Server side form validation with vue.js

Question

I am trying to use Vue.js. My service returns ajax response when request is not validated successfully (400). The response contains invalid data field details which I want to use to mark input fields with css 'invalid' class.

The vue.js form is

 <validator name="validation">
      <form novalidate>
        <div class="form-group">
          <input 
          id="username"
          type="text" 
          class="form-control"
          placeholder="Enter your username"
          v-model="credentials.username"
          v-validate:credentials.username="['required']"

          >
        </div>
        <div class="form-group">
          <input
          id="password"
          type="password"
          class="form-control"
          placeholder="Enter your password"
          v-model="credentials.password"
          v-validate:credentials.password="['required']"
          >
        </div>
      <div class="errors">
        <validator-errors :validation="$validation"></validator-errors>
      </div>
        <button class="btn btn-primary"  @click="submit()">Access</button>
      </form>
      </validator>

And bad request response contains data:

{
    "username": [{
        "memberNames": ["UserName"],
        "errorMessage": "Field 'User Name' can't be empty."
    }],
    "password": [{
        "memberNames": ["Password"],
        "errorMessage": "Field 'Password' can't be empty."
    }]
}