this.$children is behaving as if it were reactive - vue.js

Question

The official doc says the this.$children is not reactive,
The direct child components of the current instance. Note there’s no order guarantee for $children, and it is not reactive...
hence, any changes should not trigger any re-renders. [this.$children api is removed from vuejs v3, hence it works only in v2.x.]
I found this interesting... https://codepen.io/tatimblin/pen/oWKdjR
The code in sandbox above is a demonstration of tab UI implemented using slot & this.$childen api.
Initially tabs component is holding a reference to the this.$children Array, here's a log of that:
Interesting part is, the isActive prop of tab is being changed using that Array, yet it's reflected in each component, resulting in re-render..
I'm not sure what's happening here.. maybe I'm missing something.
template:
<div id="root" class="container">
<tabs>
<tab name="Services" :selected="true">
<h1>What we do</h1>
</tab>
<tab name="Pricing">
<h1>How much we do it for</h1>
</tab>
<tab name="About Us">
<h1>Why we do it</h1>
</tab>
</tabs>
</div>
JS:
Vue.component('tabs', {
template: `
<div>
<div class="tabs">
<ul>
<li v-for="tab in tabs" :class="{ 'is-active': tab.isActive }">
<a :href="tab.href" #click="selectTab(tab)">{{ tab.name }}</a>
</li>
</ul>
</div>
<div class="tabs-details">
<slot></slot>
</div>
</div>
`,
data() {
return {tabs: [] };
},
created() {
this.tabs = this.$children;
},
methods: {
selectTab(selectedTab) {
this.tabs.forEach(tab => {
tab.isActive = (tab.name == selectedTab.name);
// this is how the isActive prop is changed, using this.$children
});
}
}
});
Vue.component('tab', {
template: `
<div v-show="isActive"><slot></slot></div>
`,
props: {
name: { required: true },
selected: { default: false}
},
data() {
return {
isActive: false
};
},
computed: {
href() {
return '#' + this.name.toLowerCase().replace(/ /g, '-');
}
},
mounted() {
this.isActive = this.selected;
}
});
new Vue({
el: '#root'
});

Answer 1

The children are reactive because they are Vue components themselves, having the full power of reactivity already, apart from the tabs parent.
The doc quote means content that would otherwise not be reactive on its own. This distinction could maybe be a little clearer. On the other hand, tabs would not work properly if the slot content was anything other than a component with an isActive property, which forms a tight coupling. It wouldn't work properly with raw HTML slot content such as:
<tabs>
<div>
Hi, I'm not a component
</div>
</tabs>