How to reactively update a global object?

Question

Vue.js

There is a global object (initially empty):
Vue.prototype.$tabs = {}

There are 2 components in the application itself

<template>
  <div id="app">
    <side-features></side-features>
    <main-with-items></main-with-items>
  </div>
</template>

This global object is formed in the component (it displayed all the rules in console.log) And if this global object is displayed in the component , then it is still empty . The global object, maybe it still needs to be updated somehow? What am I doing wrong? <main-with-items></main-with-items>
<side-features></side-features>