Pass variable from Parent to Components in VueJs2

I have one HTML file with two template. For each template have a component in vue. Part of the html code is outside templates. In this part heve some buttons. On one of this button click have to change a value at one of the component. Problem is that i can't call the component methods because i'm outside the template. How can i do? Here is part of my code:

<div id="app" xmlns:v-on="http://ift.tt/lH0Osb" xmlns:v-on="http://ift.tt/lH0Osb">
    <div class="content__sidebar content__sidebar--left">
        <ul class="sidebar__menu sidebar__menu--left">

            <li><router-link to="/" style="text-align:center" class="current">Impostazioni</router-link></li>
            <li v-on:click="rulesBtnClick"><router-link to="/rules" style="text-align:center">Ruoli dell'account</router-link></li>
            <li class="show_child">

                <a style="text-align:center">Teams</a>  <!-- Styles point to <a>.. Better case would be to point to <li>-->

                <ul>
                    <li><a href="#" class="create_item">+ Crea Nuova</a></li>
                    <li v-for="item in teamsArray" v-on:click="setActualGroup">
                        <router-link v-bind:to="{path: 'rules#group-'+ item.tid}" >[[[item.team_name]]]</router-link>
                    </li>    <!-- ... "myItemName" in arrayName ... [[[myItemName.mapKey]]] -->
                </ul>
            </li>
        </ul>
    </div>
<router-view></router-view>
</div>

<template id="options">
     ...
</template>

<template id="rules">
     ...
</template>

Js Code

let optionsComponent = Vue.component('optionsComponent', {
...
});


let rulesComponent = Vue.component('rulesComponent', { 
    delimiters: ["[[[", "]]]"],
    template: "#rules",
    data : function () {
        return {
            actualGroup : 0,
        }
    },
    mounted: function () {},
    watch: { },
    methods : {},
});

let vm = new Vue({
el: '#app',
delimiters: ["[[[", "]]]"],
data: {
    teamsArray: [],
    actualGroupParent: 0
},
components: {
    'rulesComponent': rulesComponent,
    'optionsComponent': optionsComponent,
},
router: new VueRouter({
    routes: [
        {path: '/', component: optionsComponent},
        {path: '/rules', component: rulesComponent}
    ]
}),
    mounted: function () {},
    methods : {
     setActualGroup: function (id) {

        //Have to modifie here the variable actualGroup


        document.getElementById("adminTitle").hidden = true;
        document.getElementById("adminsList").hidden = true;

        document.getElementById("recruiterTitle").hidden = false;
        document.getElementById("recruitersList").hidden = false;

    },
    },
   });