Pasar variable de un componente a otro

Buenas tardes, antes que nada agradecido a quien me pueda contestar, soy nuevo con vue si puedes ayudarme por favor.

el problema es el siguien: estoy haciendo una aplicacion de chat tengo un componente que me muestra todos los usuarios online, y otro componente que me va a mostrar la ventana de chat.

ahora cuando intento pasar el valor de la variable de el componente de usuarios online para saber que usuario seleccione para chatear, no logro obtener dicha informacion en el componente de la ventana de chat.

Esta es mi vista en laravel donde llamo los 2 componentes:

@extends('layouts.app')

@section('content')
    <audio id="ChatAudio">
        <source src="{{ asset('sounds/chat.mp3') }}">
    </audio>
    <div class="container">
        <div class="column is-8 is-offset-2">
            <div class="panel">
                <div class="panel-heading">
                    List of all Friends
                </div>
                @forelse ($friends as $friend)
                    <onlineuser v-bind:friend="{{ $friend }}" v-bind:onlineusers="onlineUsers"></onlineuser>
                @empty
                    <div class="panel-block">
                        You don't have any friends
                    </div>
                @endforelse
            </div>
        </div>
        <div class="column is-8 is-offset-2">
        <chat v-bind:chats="chats" v-bind:userid="{{ Auth::user()->id }}" v-bind:friendid="{{ $friend->id }}"></chat>
        </div>
    </div>
@endsection

Este es el componente de usuarios:

<template lang="html">
    <a  class="panel-block" style="justify-content: space-between;" v-on:click="userSelect(friend.id)">
        <div >{{ friend.name }}</div>
        <div class="is-pulled-right">
            <i class="fa fa-circle green" v-if="checkUser()">ST</i>
            <i class="fa fa-circle red" v-else>ST</i>
        </div>
    </a>
</template>

<script>
    export default {
        props: ['friend', 'onlineusers'],
        data(){
            return{
                
            }
        },
        methods: {
            checkUser: function() {
                return _.find(this.onlineusers, {id: this.friend.id});
            },
            userSelect(id_friend){
                var vm = this
                axios.get('chat/'+ id_friend)
                    .then(function (response) {
                        vm.$emit('data_friend', response.data.friend);
                    });
                    
            }
        }
    }
</script>

<style lang="css">
    .red {
        color: red;
    }
    .green {
        color: green;
    }
</style>

Y Este es el componente de la ventana del chat:

<style scoped>
    .panel-block {
        flex-direction: column;
        border: none;
    }
    .chat {
        width: 100%;
        padding: 20px;
        box-shadow: inset 0 0 20px 0 grey;
        margin-bottom: 20px;
        border: 1px solid grey;
        max-height: 600px;
        overflow-x: auto;
    }
    .chat .chat-right, .chat .chat-left {
        max-width: 70%;
        box-shadow: 0 0 8px 0px grey;
        padding: 8px;
        margin: 4px;
    }
    .chat-right {
        float: right;
    }
    .chat-left {
        float: left;
    }
    .no-message {
        height: 200px;
        display: flex;
        align-items: center;
    }
</style>

<template>
    <div class="panel">
        <div class="panel-heading">
            <h2  v-if="friend">{{ friend.name }}</h2>
            <h2  v-else>Seleccione un Usuario</h2>
            <div class="panel-block">
                <div class="chat" v-if="chats.length != 0">
                    <div v-for="chat in chats" :key="chat.id" style="overflow: auto;">
                        <div class="chat-right" v-if="chat.user_id == userid">
                            {{ chat.chat }}
                        </div>
                        <div class="chat-left" v-else>
                            {{ chat.chat }}
                        </div>
                    </div>
                </div>
                <div v-else class="no-message">
                    There are no messages
                </div>
                <chat-composer v-bind:userid="userid" v-bind:chats="chats" v-bind:friendid="friendid"></chat-composer>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props: ['chats', 'userid', 'friendid'],
        data(){
            return{
                friend: ''
            }
        }
    }
</script>

de verdad muchas gracias a quien pueda ayudarme con esto.