Vue.js: Why doesn't Vue see updated reactive data?

Question

Vue.js

New to Vue, and new to the front end too. Please explain what is wrong with the dynamic loading of data into the edit form (SPA application).
The source data is this. There is a list of workers whose basic data is already loaded somehow. The user clicks on the list item, and the worker's data is transferred to the edit form, which is then activated via v-if. Everything is beautiful. But there is data for this worker that is not initially loaded: they need to be loaded into the form only when it is selected.
I do so. At the moment of transferring the main data to the form, I make a request to the server and receive the data. Schematically:

this.fill_userdata(user_id);
if (this.form.some_field == undefined) {
    axios.post(...)
        .then(response => {
          this.form.some_field = response.data;
        })
}
this.form_enabled = true;

The request, of course, is asynchronous, and when it is executed this.form.some_field = response.data, the form has already been rendered. And then an ambush: the field with the data requested from the server is empty! The problem is that Vue for some reason does not update this field, although its source (model) has changed. Further, it is even more interesting: it is enough to change any of the other fields of this form, and Vue immediately wakes up and updates some_field.

How beautiful is it to win? Maybe we need a fundamentally different approach to solving such a problem? Which?

Answer 1

You don't have this field declared initially, so Vue can't track its change.
Use
Vue.set(this.form, 'some_field', response.data);