How can I share a method between components in Vue.js?
<p>Check out this simple shopping cart demo:</p>

<p><a href="http://plnkr.co/edit/CHt2iNSRJAJ6OWs7xmiP?p=preview" rel="noreferrer">http://plnkr.co/edit/CHt2iNSRJAJ6OWs7xmiP?p=preview</a></p>

<p>A user can pick a veggie and a fruit, and it will be added into the cart array. The function that adds a fruit/veggie is very similar, and I want to combine it into a function that can be shared across both components.</p>

<pre><code>    selectFruit: function(product){
       var cart = this.cart
       for(p in cart){
       if (cart[p]["type"] == "fruit"){
           console.log("We already got a fruit!, Let's remove " + cart[p]["name"] + " and add in " + product["name"]);
              this.cart.$remove(cart[p])
             }
            }
            console.log("Adding " + product.name + " to cart.");
            var productName = product.name
            var cartFruit = {name: product.name, type: 'fruit'}
            this.cart.push(cartFruit)
}

selectVeggie: function(product){
    var cart = this.cart
    for(p in cart){
        if (cart[p]["type"] == "veggie"){
           console.log("We already got a veggie!, Let's remove " + cart[p]["name"] + " and add in " + product["name"]);
           this.cart.$remove(cart[p])
        }
    }
    console.log("Adding " + product.name + " to cart.");
    var productName = product.name
    var cartVeggie = {name: product.name, type: 'veggie'}
    this.cart.push(cartVeggie)
}
</code></pre>

<p>How can I make it so I can alter this method and have it used globally? I'm using the Vue Router with this project btw, thanks for any help!</p>