Why is it possible to have reactive elements added at mount? - vue.js

Question

The documentation for Reactivity in Depth explains why adding new root-level reactive properties to an already created instance is not possible (and how to actually add them via this.$set()).
In that case, why an initially empty object can be updated (and reactive) at mount time, after the instance was intialized? Or does the initialization part includes the mount? (though it is possible to mount an instance manually after the initalization)
new Vue({
el: "#app",
data: {
myobject: {}
},
mounted() {
setTimeout(() => {
this.myobject = {
"x": 1
}
}, 2000)
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.11/vue.js"></script>
<div id="app">
{{myobject}}
</div>
Direct further modifications after the mount are not taken into account, in line with the documentation (this.myobject.y = 2 for instance would not work, while this.$set(this.myobject, "y", 2) will be fine)

Answer 1

The code in your sample does not fall into the change detection caveat because you are not adding a property to myobject you are setting myobject to an entirely new object. Vue has no problem detecting object reference changes.
What Vue cannot detect is adding a property to an object that did not already exist. For example if you did this:
mounted() {
setTimeout(() => {
this.myobject.someNewProperty = "some value"
}, 2000)
}
Vue would not detect the change. Here is your example updated to demonstrate that the DOM never changes after the object is changed.
new Vue({
el: "#app",
data: {
myobject: {}
},
mounted() {
setTimeout(() => {
this.myobject.someNewProperty = "some value"
}, 2000)
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.11/vue.js"></script>
<div id="app">
{{myobject}}
</div>
What the documentation means when it says
Vue does not allow dynamically adding new root-level reactive
properties to an already created instance.
Is that you cannot add another property to the data object after the Vue instance is created. For example this code:
var vm = new Vue({
el: "#app",
data: {
myobject: {}
},
mounted() {
setTimeout(() => {
this.$set(vm.$data, 'newRootLevelProperty', "some value")
}, 2000)
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.11/vue.js"></script>
<div id="app">
{{myobject}}
</div>
Results in the warning
[Vue warn]: Avoid adding reactive properties to a Vue instance or its
root $data at runtime - declare it upfront in the data option.
But you can add properties to nested objects (such as myobject) as long as you use $set.