Vue.js: почему Vue не видит обновлённые реактивные данные?

Question

[Алексей]

Новичок в Vue, и во фронэнде тоже. Прошу объяснить, что не так в динамической подгрузке данных в форму редактирования (SPA-приложение).
Исходные данные такие. Есть список работников, основные данные которых уже как-то загружены. Юзер кликает по элементу списка, и данные работника переносятся в форму редактирования, которая затем активизируется через v-if. Всё красиво. Но есть данные этого работника, которые изначально не загружаются: их нужно подгрузить в форму только когда его выбрали.
Делаю так. В момент переноса основных данных в форму делаю запрос на сервер и получаю данные. Схематично:

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;

Запрос, понятно, асинхронный, и когда выполняется this.form.some_field = response.data, форма уже отрисовалась. И тут засада: поле с запрошенными с сервера данными пустое! Проблема в том, что Vue почему-то не обновляет это поле, хотя его источник (model) изменился. Дальше ещё интереснее: достаточно изменить любое из прочих полей этой формы, и Vue тут же просыпается и обновляет some_field.

Как это красиво победить? Может, нужен принципиально другой подход к решению такой задачи? Какой?

Answer 1

[WebDev]

У вас изначально это поле не объявлено, поэтому Vue не может отследить его изменение.
Используйте
Vue.set(this.form, 'some_field', response.data);

Comments

[Алексей]

Поле включено в систему реактивности:

<v-textarea
   v-model="form.some_field"
></v-textarea>

var vm = new Vue({
    el: '#app',
    vuetify: new Vuetify(),
    data: {
        form: {
           some_field: null,
           ...
           ...
        }    
    },
    ...

Vue же обновляет его после того, как что-то тронешь на форме!

[Алексей]

Не понял что значит "У вас изначально это поле не объявлено,...", но ваше решение помогло!
Спасибо!