Vue.js - axios get and post - how to make it work the way I want?

Question

Vue.js

Given:
Component - input form.
The first 3 fields are for acquaintance, the 4th is checking the access code (in our API this is a get-request)
If the check passes, the component sends up $emit - an event by which the page causes the information to be saved in CRM (in our API this is a post-request ).

How the system behaves:
1. If the code is not entered at all - a standard check for filling in the field. Business does not reach API, and should not. All OK.

2. A deliberately incorrect code was entered - axios calls the API 2-3 times at least ... it is even visually visible how the error status with code 0 (that is, in fact, no response was received at all) changes to "Code not found in the database" . In principle, the final result suits me. The rapidly changing inscriptions of the erroneous status even give visual seriousness to the check - I would consider it ok, if not for further ....

3. After 2 (the sequence is important!) Enter the correct code - the input field is highlighted in green, there are no erroneous statuses under the field - but also the system does not work out the correct behavior. When I click the "Submit" button here again (without changing absolutely anything) - then the check passes and the v-if fires to display success.

4. And now we change the input order. First I enter the correct code. The input field is surrounded by a green frame t=u without indication of errors - but the page is not reloaded either, it does not come to changing the value of the v-if attribute. If now at this moment I change the code to the wrong one, it does not work out the "Code not found in the database" option, but in general a check / server error and the v-if branch that is emergency is triggered (at the same time, an indirect check that the reactivity is working correctly) .

So far, I can’t understand what’s wrong ..... I turn to the collective mind.

An example of a code fragment (component call and axios-post call code) is given https://jsfiddle.net/LouDminsk/0ztmvp4u/2/ - in its entirety, if necessary, to look under the debugger from the outside, I can give a link

PS Yes, I didn't describe how I need it to work - but I think it's obvious! If the code is not entered - item 1 (it works). If the code is incorrect, the code check fails, the page is not reloaded (almost point 2, except for a few calls). If the code is correct, v-if is triggered without additional pressing and a part of the template for the correct answer is shown. In this case, nothing depends on the input order (empty-incorrect-correct). That is, the way you yourself would like the system to behave when you need to fill out some form with data verification :)

Update #1: I looked at the behavior of the system when entering the wrong code immediately after the correct one (point 4 above). A beat (and the call to the "accident" goes to the function that is called by emit - that is, it seems that the component does not re-check the data; but again, this is not the case, because it reacts properly to an empty field instead of code - and this check is carried out only by the component itself, a step before it has to check for the existence of code.