How to force computed property call in vue 2 component?

Question

Vue.js

Good day!
The problem is the following.
There is a form, it has 4 fields (name, phone, mail, code).
For the first 3 - this is input, the code field (also input) is decorated by the component.
First, all this is checked for filling, and the phone and mail are also checked for correctness. Everything works perfectly. I entered the parameters, pressed the "Submit" form button, the checks passed - the fields with errors were highlighted with a red frame and text below.

But then, if the previous step is without errors (everything is entered and in the correct format), the value of the code is sent via axios to the server API to check the actual existence of the code in the database. The API returns a response (correct, this is verified). But drawing the field after the check does not want to show the status immediately: everything is shown only after I click on any other field, and then again on the code field (losing and gaining focus, in fact). Of course, I need the diagnostics to be immediately, as in the first part, without additional clicks.

I would appreciate ideas.
PS I can show you the code, of course! How is it better? Immediately give a link on the server and look under the debugger, or what?
https://jsfiddle.net/LouDminsk/42s93nq5/2/- left only the component call + one more field (for comparison) from HTML, the JS part is fully included. But I'm using VUE 2.6.14 and this tool only has 2.2.1

Answer 1

Firstly: you were already hinted at in the comments:

computedproperties in vue are recalculated when their reactive dependencies, which were involved in previous calculations, change

Those. on the fingers: you turned computedto this.value- now he is looking for changes this.value. Yours does computednot refer to anything , it simply returns a function, its contents and calls computeddo not apply to.
For understanding:
Here is your code:

computed: {
  validatedClass() {
    return (input) => {
      return {
        'uk-form-success': this.wasValidated && !this.errors[input],
        'uk-form-danger': this.wasValidated && this.errors[input],
      }
    }
  }
},

is equivalent to:

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);
  }
},

This computedone will only be updated when Vue sends. Ideally, in fact, never.
In fact, you just wrote the usual method , but through one place.)
Secondly: your problem is in another: this.errors = {}.
Due to the limitations of setters, new keys added to an object in this way this.errors.email = []are not reactive .
You need to add keys either through or, which is better, in advance:this.$set(this.errors, 'email', [])

this.errors = {
  email: '',
  // ...
}

And thirdly: to change something in this.$children- very very very bad. Just use props. This feature is available only for extremely complex cases in library components. Definitely not for you.

Answer 2

Aetae, although this is not a solution, but it gave me an idea how to solve it :) freaked out, rewrote everything - instead of 251 lines of a non-working .js file, it turned out 179 lines (to the same, but working functionality). So thanks anyway!