How to pass an object to all components (global visibility)?

Question

Vue.js

To understand the essence of the issue, I created a sandbox.
How to make the "client" object from main.js visible in the App.vue component, its descendants and other js files
https://codesandbox.io/s/vue-template-qmdr7

Answer 1

const createClient = XMPP.createClient({
  jid: "[email protected]",
  password: "1",
  transport: "websocket",
  wsURL: "ws://example.com/xmpp-websocket"
});
Vue.prototype.$createClient = createClient;

export default {
  name: "App",
  created: function() {
    console.log(this.$createClient)
  }
};
</script>

Answer 2

option 1 (correct): in the Mounted() method, make a request

export default {
    data() {
        return {
            client: {},
        }
    },
    mounted() {
        var client = XMPP.createClient({
            jid: "[email protected]",
            password: "1",
            transport: "websocket",
            wsURL: "ws://example.com/xmpp-websocket"
        });

        this.client  = client 
    }
};

option 2 (not quite right): https://codesandbox.io/s/vue-template-ey7rv