Во-первых: тебе намекнули уже в комментах:
computed свойства в vue пересчитываются когда меняются их реактивные зависимости, которые участвовали в предыдущих вычислениях
Т.е. на пальцах: ты обратился в
computed к
this.value - теперь он смотрит за изменениями
this.value. Твоё же
computed ни к чему не обращается, оно просто возвращает функцию, её содержимое и вызовы к
computed не относятся.
Для понимания:
Вот этот твой код:
computed: {
validatedClass() {
return (input) => {
return {
'uk-form-success': this.wasValidated && !this.errors[input],
'uk-form-danger': this.wasValidated && this.errors[input],
}
}
}
},
равносилен:
function someRandomFunction(input) => {
return {
'uk-form-success': this.wasValidated && !this.errors[input],
'uk-form-danger': this.wasValidated && this.errors[input],
}
}
computed: {
validatedClass() {
return someFunction.bind(this);
}
},
Такой
computed будет обновлён только когда Vue пошлёт. В идеале, на самом деле, никогда.
По сути ты просто написал обычный
метод, но через одно место.)
Во-вторых: проблема у тебя в другом:
this.errors = {}.
Из-за ограниченных возможностей сеттеров,
новые ключи, добавленные в объект таким образом
this.errors.email = [] -
не реактивны.
Добавлять ключи надо либо через
this.$set(this.errors, 'email', []) либо, что лучше, заранее:
this.errors = {
email: '',
// ...
}
Ну и в третьих: менять что-то в
this.$children - очень
очень очень плохо. Просто используй
props. Такая возможность наличествует только для крайне сложных случаев в компонентах библиотек.
Точно не для твоего.
Простой
Средний
