title: How can I share a method between components in Vue.js?
body: <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>