Reactivity in Vue.js

I spent few hours last weekend trying to append an array as new property into a reactive Vue object. After getting the response via GET request, I could see the new property print in the console, but the frontend didn’t change, so I thought that something was happening behind the curtain. Why a new reactive object property dynamiclly created is not really reactive?

<div id="app">
  <p>{{ myObj.first }}</p>
</div>

new Vue({
  el: '#app',
  data: {
    myObj: {}
    
  },
   mounted () {
   this.myObj.first = 'bbb';
   }
})

My thought: Probably I don’t know Vue as far I believe! Go to the manual…

https://vuejs.org/v2/guide/reactivity.html

Vue does not allow dynamically adding new root-level reactive properties to an already created instance. 
However, it’s possible to add reactive properties to a nested object using the Vue.set(object, key, value) method.

Et voilà found the answer here

https://vuejs.org/v2/api/#Vue-set

<div id="app">
  <p>{{ myObj.first }}</p>
</div>

new Vue({
  el: '#app',
  data: {
    myObj: {}
    
  },
   mounted () {
	Vue.set(this.myObj, 'first', 'aaa');
   }
})

Check my VueSquare and feel free to send me back your feedback.