К в Vue-динамической форме организовать отображение ошибки?

Добрый день.

По дизайну форма имеет поля, имеет динамические поля (те что пользователь можно добавить/убавить). В случае, если пользователь ввел что-то некорректно, ошибка показывается под соответствующим полем.

Рассмотрим пример формы авторизации, где пользователю предлагается ввести логин, пароль и сколько угодно ролей:

<template>
    <FForm @submit="doAuth" ref="authForm">
        <FInputText caption="Имя пользователя" v-autofocus v-model="authForm.login"></FInputText>
        <FInputText caption="Пароль" password v-model="authForm.password"></FInputText>

        <div v-for="(_, index) in authForm.roles">
            <FInputText
                    caption="Роль"
                    v-model="authForm.roles[index].name"
            ></FInputText>
        </div>
        <button @click="addRole">+</button>

        <FButton caption="Войти" submit class="submit-button"></FButton>
    </FForm>
</template>

<script>
    export default {
        name: "Test",
        data() {
            return {
                authForm: {
                    roles: []
                }
            }
        },
        methods: {
            addRole() {
                this.authForm.roles.push({})
            },
            doAuth(e) {
                // ...
            }
        },
    }
</script>

Пользователь ввел неверно логин и вторую роль. Сервер передал следующий ответ:

{
  "errors": {
    "login": "Ошибка в логине",
    "role[1].name": "Ошибка во второй роли"
  }
}

Вопрос, как не усложняя шаблон (template) организовать отображение ошибок?

Усложнять реализацию FForm и FInputText можно сколько угодно.