VueJS: Best practice for working with global object between components?

Note: Applies for Vue 2x

Proposal 1: Using getters from vuex

• You could use getters along with mapGetters from Vuex to include users within computed properties for each component.

Vuex

getters: {
  // ...
  getUser: (state, getters) => {
    return getters.user
  }
}

component

import { mapGetters } from 'vuex'
computed: {
  ...mapGetters([getUser])
}

Proposal 2: add a watcher via plugin

Vue

// When using CommonJS via Browserify or Webpack
const Vue = require('vue')
const UserPlug = require('./user-watcher-plugin')

// Don't forget to call this
Vue.use(UserPlug)

user-watcher-plugin.js

const UserPlug = {
  install(Vue, options) {
    // We call Vue.mixin() here to inject functionality into all components.

    Vue.watch: 'user'
  }
};

export default UserPlug;

Proposal 3: add a computed property user as plugin via mixin

Vue

// When using CommonJS via Browserify or Webpack
const Vue = require('vue')
const UserPlug = require('./user-watcher-plugin')

// Don't forget to call this
Vue.use(UserPlug)

user-watcher-plugin.js

const UserPlug = {
  install(Vue, options) {
    // We call Vue.mixin() here to inject functionality into all components.

    Vue.mixin({
      computed: {
        user: function() {
          return this.$store.state.user
        }
      }
    })
  }
};

export default UserPlug;

Based on @Denis answer, specifically Proposal 3, Here is the UserPlugin.js:

import store from '@/store/store';
import User from './User';

const UserPlugin = {
  install(Vue) {
    const $user = new User();
    window.$user = $user;
    store.commit('setUser', $user);
    Vue.mixin({
      computed: {
        $user() {
          return store.state.user;
        }
      }
    });
  }
};
export default UserPlugin;

and main.js:

import UserPlugin from './common/UserPlugin';

Vue.use(UserPlugin);

new Vue({
  render: h => h(App)
}).$mount('#app');

For further usage, I published small library for solving these kinda issues:

https://www.npmjs.com/package/vue-global-var