Использование vue.js в landing page

Всем привет. Уже написал пару простых SPA на vue.js, активно его изучаю. Встал вопрос с использованием vue в простых сайтах.

Если быть точнее, то не понимаю, как из одного компонента передать событие в другой? К примеру, есть кнопка добавления товара, на клик по которой мне необходимо вызывать метод addProduct в компоненте Cart. Как правильно это сделать?

//main.js: 
import Vue from 'vue'
import Cart from './components/Cart.vue'       
const app = new Vue({
    el: '#app',
    components: {ExampleComponent}
});

HTML:

<div id="app">      
    <cart></cart>
</div>

Cart.vue:

<template>
    <div id="cart">
    </div>
</template>
<script>
    export default {
        data: function() {
            return {
                items: []
            }
        },
        methods: {
            addProduct: function (id) {
                //console.log('Adding product ' + id)
            },
            reduceProduct: function (id) {
                //console.log('Reducing product ' + id)
            },
            removeProduct: function (id) {
                //console.log('Removing product ' + id)
            }
        },
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>