Vue - Added Nested Attributes Become Reactive But Why? - vue.js

Question

From the documentation (https://v2.vuejs.org/v2/guide/reactivity.html), I was under the impression that all attributes of an object need to be in the Vue data object to be reactive, unless they're explicitly added using Vue.set(object, key, value), or this.$set(object, key, value).
However, I'm using Rails with Vue and any data attribute I collect in a form, whether it's initially in the data object or not, becomes reactive. I'm using Jbuiler to build JSON objects, but I don't think that's affecting the reactivity, since if I remove the attributes there, they're still reactive when collected in the form. I've tried attributes that are on the object in Rails and ones that aren't, in Jbuilder or not, added via the console or not. All become reactive. This is great, but not the behavior I expect, so I 'd like to understand it.
Here's an example...
# Product attributes: name, code (note: not 'location'!)
# Rails Controller
def new
#product = Product.new
end
# JS
var product = gon.product // using Gon gem to pass variables
var app = new Vue({
el: element,
data: function() {
return {
id: id,
product: product
}
}
)}
# HTML
<div class="col-sm-3">
<input type="text" v-model="product.code" class="form-control form-control-sm" />
</div>
<div class="col-sm-3">
<input type="text" v-model="product.location" class="form-control form-control-sm" />
</div>
<div>
Product Code: {{ product.code }}
Product Location: {{ product.location }}
</div>
When I start typing in the product.location field, the output immediately appears on the screen, so it appears to be reactive. Examining the object in the console reveals a reactive getter and reactive setter for the product.location. The attribute isn't initially in the Vue console devtool but it appears as soon as I start typing in the field.
So, what gives?

Answer 1

From the documentation link above:
When you pass a plain JavaScript object to a Vue instance as its data option, Vue will walk through all of its properties and convert them to getter/setters using Object.defineProperty.
In other words, everything defined on component instance is reactive. This allows watcher instance to update all dependent values and virtual DOM.
$set method is used to ensure that reactivity works for deeply nested objects/arrays or previously not defined properties.
In addition, v-model directive uses $set method to update values, so even if value did not have getters and setter initially, those will be added after value has been updated.