HTML in Vue.js not updating after axios get request updates object's property

Question

HTML in Vue.js not updating after axios get request. HTML is:

<span @click="tryResponse">
        Data_object: {{ data_object }} <br>
        Data_object.serial: {{ data_object.serial }} <br>
</span>

data:

  data(){
    return{
        data_object: {},
    }
  },

method:

methods: {
    tryResponse() {
        axios.get('http://127.0.0.1:8000/source/groups/15').then((response) => {
                this.data_object.serial = response.data});

}

This is all happening in a file called App.vue (if that is important).

If I look in chrome dev tools Vue, I can see the data object does update and populate with the correct information. But it doesn't update in the html on the page.

Edit: Everything works fine if I do:

this.data_object = response.data

But the problem comes when I do this:

this.data_object.serial = response.data

Answer 1

The property serial is never declared on the vue instance and therefore is not reactive.

You could use Vue.set(this.data_object, "serial", response.data) this registers it with vue so it will add observers to this variable and it will become reactive

or

declare the serial property on the data object

 data(){
    return{
        data_object: {
            serial: ""
        },
    }
  },

Here's a link about reactivity in Vue