Vue.js use variable within a component in another component
<p>I've got an employee table. Every employee has a role, I'm trying to filter that with radio buttons (for example a radio button admin or superadmin).</p>

<p>How can I use a variable within a component in another component? Right now I've this:</p>

<pre><code>   &lt;template id="searchemployees"&gt;
        &lt;div class="form-group"&gt;
            &lt;label class="col-md-2 control-label"&gt;Filter&lt;/label&gt;

            &lt;div class="col-md-10"&gt;
                &lt;div class="radio radio-primary"&gt;
                    &lt;label&gt;
                        &lt;input type="radio" name="intern" id="intern" value="intern" v-model="selectedrole"/&gt;
                        Toon alles
                    &lt;/label&gt;
                &lt;/div&gt;
                &lt;div class="radio radio-primary"&gt;
                    &lt;label&gt;
                        &lt;input type="radio" name="employee" id="employee" value="employee" v-model="selectedrole"&gt;
                        Stagiaire
                    &lt;/label&gt;
                &lt;/div&gt;
            &lt;/div&gt;    
        &lt;/div&gt;
    &lt;/template&gt;

 &lt;template id="employees"&gt;
        &lt;table class="table"&gt;
            &lt;thead&gt;
            &lt;tr&gt;
                &lt;th&gt;Logo&lt;/th&gt;
                &lt;th&gt;Bedrijfsnaam&lt;/th&gt;
                &lt;th&gt;Plaats&lt;/th&gt;
            &lt;/tr&gt;
            &lt;/thead&gt;
            &lt;tbody&gt;
                &lt;tr class="table-row-link" data-href="" v-for="employee in list | role selectedrole"&gt;
                    &lt;td&gt;&lt;img class="img-circle-company" src=""/&gt;&lt;/td&gt;
                    &lt;td&gt;@{{ employee.role.RoleName }}&lt;/td&gt;
                    &lt;td&gt;@{{ employee.LastName }}&lt;/td&gt;
                &lt;/tr&gt;
            &lt;/tbody&gt;
        &lt;/table&gt;
    &lt;/template&gt;

&lt;script&gt;
        Vue.config.debug = true;

        Vue.filter('role',function(value,role)
        {
            if(!role || 0 === role.length)
            {
                return value;
            }
            return value.filter(function(item) {
                return item.role.RoleName == role
            });
        });

        Vue.component('searchemployees', {
            template: '#searchemployees'
        });

        Vue.component('employees', {
            template: '#employees',
            props:['list'],
            created() {
                this.list = JSON.parse(this.list);
            }
        });

        new Vue({
            el: 'body'
        });
&lt;/script&gt;
</code></pre>

<p>In my <code>#searchemployees</code>it takes the right selected role. But how can I use it in <code>#employees</code> for my filter?</p>

<p>Thankyou</p>