Vee-validate 3 и Bootstrap 3 формы ошибок стиля

Question

Как я могу добавить стиль has-error к div-элементу обертки входа Bootstrap 3?

Так что это не проверяется, потому что компонент ValidationProvider не найдет ввод:

<!-- doesn't work because the provider can't find the input -->
<ValidationProvider v-slot="{ errors }">
    <div :class="{'form-group': true, 'has-error': errors.lenght > 0}">
        <label for="credit-card">
            Card Number
        </label>
        <input type="text" id="credit-card" class="form-control" data-stripe="number" v-model="paymentForm.creditCard.number"/>
    </div>
</ValidationProvider>

Таким образом, это подтверждается, но я не могу получить доступ к div упаковки и проверить там {{errors[0}}.

<!-- this won't work, obviously -->
<div :class="{'form-group': true, 'has-error': errors.lenght > 0}">
    <ValidationProvider v-slot="{ errors }">
        <label for="credit-card">
            Card Number
        </label>
        <input type="text" id="credit-card" class="form-control" data-stripe="number" v-model="paymentForm.creditCard.number"/>
    </ValidationProvider>
</div>

Как я могу получить класс has-error в div упаковки, используя V-валидация без повторного изобретения колеса и создания большого количества пользовательского кода для его работы?