How can I share data between non parent-child components in Vue

Use this small plugin if you want to share data between a lot of nested components:

Vue.use(VueGlobalVariable, {
  globals: {
    user: new User('testuser'),
    ....
  },
});

use $user in any component!

Note: this answer is only valid for vue 1

You could do a broadcast from the root Vue instance for example. this.$root gives you access to the root component in your current vue instance. Thus it will reach at its children:

<script>
export default {
    template: require('./get_users.template.html'),

    data: function() {
        return {
            userList: ''
        }
    },

    methods: {
        getUsers(e) {
            e.preventDefault();

               this.$http.get('api/getusers').then(function (response) {
                    this.userList = response.data.users;
                    this.$root.broadcast('show-results:users', { users: response.data.users });
            })
        }
    }
}
</script>

Then you listen for the show-results:users event in your show-results component:

events: {
    'show-results:users': function(data) {
        // do your stuff here
    }
}

Of course you can give the event any name you want to.

With Vue 2.0 things are bit different as broadcast has been deprecated. Vue documentation talks about using centralized event bus to accomplish this. Here's how you could it;

1. Define centralized event hub. So in your The Vue instance/decalaration define

    const eventHub = new Vue() // Single event hub
   
    // Distribute to components using global mixin
    Vue.mixin({
        data: function () {
            return {
                eventHub: eventHub
            }
        }
    })
   

2. Now in your component you can emit events with

    this.eventHub.$emit('show-results:users', { users: response.data.users })
   

3. And to listen you do

    this.eventHub.$on('show-results:users', data => {
    // do your thing
    })