Валидация в Vue и bootstrap-vue

Делаю валидацию полей в Vue. Подключен bootstrap-vue, который имеет встроенную кривую валидацию, которая работает не так как нужно, то есть высвечивает состояние полей сразу до введения данных.

Цель - показывать валидацию поля только после потери фокуса на нём. На инпут вешается директива вида :state="stateValidMessageUserName", в Computed создается такое же свойство, которое при возврате true делает поле зелёным, false красным.

То есть как правило в компутед засовывается значение инпута, которое через какие-то проверки валидации возвращает тру или фоллс. Но делает это сразу.

 <b-form-input @blur="blurValidMessageUserName" :state="stateValidMessageUserName" autocomplete="off" type="text" id="messageUserName" placeholder="Имя" name="messageUserName" v-model="messageUserName"></b-form-input>
 computed: {
            stateValidMessageUserName() {
                this.$state.getters.messageUserNameValid;
            },
getters: {
        messageUserNameValid(state) {
            return state.messageUserName < 30
        }

Как видно, в поле на событие потери фокуса я повесил обработчик @blur, который при потери фокуса что-то делает. Как мне увязать всё это, чтобы валидация отрабатывала только после потери фокуса и сохранялась при этом?