Как изменить мой пользовательский компонент ввода для работы с vee-validate?

Я создал компонент ввода в своем проекте Vue и использую этот компонент в своих формах. Я хочу использовать vee-validate для проверки моих входных данных.

Сначала я попытался проверить свой компонент так же, как обычный ввод, но после неудачного отображения сообщений об ошибках и проверки Vue Devtools я понял, что ошибки относятся к компоненту ввода. (хотя есть два вычисляемых свойства с именами «ошибки» и «поля», к которым имеют доступ все мои компоненты, от корня до самого входного компонента.)

Затем я проверил vee-валидировать документы и попытался использовать Поставщик проверки и Наблюдатель за валидацией. Эти два компонента слишком запутывают меня, и я не мог понять, как их использовать, даже после проверки эта средняя статья. Я не знаю, как эти компоненты используют слоты с ограниченной областью действия.

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

Это мой компонент ввода:

<template>
  <div class = "info-input-control">
    <div class = "info-input-icon">
      <slot name = "icon"><span uk-icon = "icon: pencil; ratio: 1.4"></span></slot>
    </div>

    <input :id = "id" :type = "type" :value = "value" :name = "name"
           v-validate = "validations || ''"
           @keyup.enter = "$emit('enter')"
           @focus = "isActive = true"
           @blur = "isActive = value.length > 0"
           @input = "$emit('input', $event.target.value)" :key = "name">
    <label :for = "id" :class = "{'info-input-label': true, 'is-active': isActive}">{{label}}</label>

  </div>
</template>

<script>
    export default {
        name: 'InfoTextInput',
        props: {
            id: String,
            label: String,
            ltr: Boolean,
            name: {
                type: String,
                required: true
            },
            type: {
                type: String,
                required: true,
                validator: function (value) {
                    return ['text', 'password', 'email'].indexOf(value) !== -1
                }
            },
            validations: Object,
            value: String
        },
        data() {
            return {
                isActive: false
            }
        },
        mounted() {
            this.isActive = this.value.length > 0
        }
    }
</script>

и это минимальная версия моей формы с одним компонентом ввода:

<form action = "#" @submit.prevent = "userLogin">
    <div class = "uk-text-danger">
        <span>Errors: </span>
        <span>{{errors.first('mobile')}}</span>
    </div>

    <div class = "uk-flex uk-flex-center">
        <div class = "uk-width-medium">
            <info-text-input type = "text" id = "user-login-phone" label = "Mobile" name = "mobile" ltr v-model = "login.mobile" :validations = "mobileValidations" key = "login-mobile">
                <template v-slot:icon>
                    <span uk-icon = "icon: phone; ratio: 1.4"></span>
                </template>
            </info-text-input>
        </div>
    </div>
</form>

P.S. Я зарегистрировал Validation Observer и Validation Provider по всему миру.