To in Vue-dynamic form to organize the display of an error?

Question

Vue.js

Good afternoon.
By design, the form has fields, has dynamic fields (those that the user can add / subtract). In case the user entered something incorrectly, the error is shown under the corresponding field.
Consider an example of an authorization form where the user is prompted to enter a login, password, and as many roles as desired:

<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>

The user entered the wrong login and second role. The server sent the following response:

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

The question is, how without complicating the template (template) to organize the display of errors?
You can complicate the implementation of FForm and FInputText as much as you like.

Answer 1

Damn, wrote a detailed answer. Pressed preview and forgot. And then he returned, updated and ... everything was erased. 21st century, man.
I did that now you can do this:

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

        <div v-array="roles">
            <FInputText
                    caption="Роль"
                    f-name="name"
            ></FInputText>
        </div>
        <button @click="rolesAdd({})">+</button>

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

where f-name and v-array work intuitively, and the collected object is added to authForm, which is defined in the FForm tag.
You can do a lot of interesting things that you can't do in vue out of the box. Digging towards vue compiler modules. Examples here: https://github.com/vuejs/vue/tree/dev/src/platform...

Answer 2

<FInputText
                    caption="Роль"
                    v-model="authForm.roles[index].name"
            ></FInputText>
<template v-if="hasRoleError(index)">
{{ errors.role[index].name }}
</template>

hasRoleError(index) {
  return this.errors.role && this.errors.role[index];
}

Take a break from this.
Perhaps the indexes will not be correct, maybe somewhere you will need not [index] but [--index]