実行環境

• macOS 10.15.7 (19H1217)
• Vue.js 2.6.14

本題

例として，以下のようなオブジェクトhogeについて考えます。

...
{{ hoge.prop1 }}
{{ hoge.prop2 }}
...
data: function() {
    return {
        hoge: { prop1: 'prop1' }
    }
}
...

hoge.prop1については，以下の操作を行うことで，HTML上の値も更新されます。

this.hoge.prop1 = 'newProp1'

では，hoge.prop2についても同様に以下の操作を行うことで，HTML上の値も更新されるのでしょうか。

this.hoge.prop2 = 'prop2'

実は，これでは更新されません。
dataブロック内でhogeのプロパティとしてprop2が定義されていないためです。
しかし，以下の操作を行うと更新されます。

this.$set(this.hoge, 'prop2', 'prop2');

このように，Vue.jsでは，新しいプロパティをリアクティブにするためには，setを使う必要があります。

参考文献

https://it-web-life.com/vue_object_not_updated/
https://jp.vuejs.org/v2/api/index.html#Vue-set