title: How to share "computed" methods across a Vue.js application
body: <p>I have a Vue.js application which loads a list of items, and each item is passed as a <code>prop</code> to a Vue component.</p>
  
  <p>I figured out that by using <code>mixins</code> I can share common component properties, like <code>computed</code>,<code>created</code>, etc.</p>
  
  <p>Now, I'm trying to sort the list of items and can't figure out how I would access each component's computed properties to apply sorting/filtering. How can I accomplish this?</p>
  
  <p><strong>Items</strong></p>
  
  <pre><code>[{
    price: 10,
    qty: 2
  }, {
    price: 8,
    qty: 3
  }]
  </code></pre>
  
  <p><strong>Mixin - ./Cost.js</strong></p>
  
  <pre><code>export default {
    computed: {
       cost () {
          return this.price * this.qty;
       }
    }
  }
  </code></pre>
  
  <p><strong>Component (which works as expected) - ./Product.vue</strong></p>
  
  <pre><code>import Cost from './Cost.js'
  export default {
     name: 'product-item',
     props: ['product'],
     mixins: [Cost]
  }
  </code></pre>
  
  <blockquote>
    <p>How would you access the computed properties, or restructure this setup?</p>
  </blockquote>
  
  <p><strong>List component</strong></p>
  
  <pre><code>&lt;template&gt;
    &lt;div id="list"&gt;
       &lt;div v-for="product in sorted" :product="product"&gt;Cost: {{ cost }} &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import ProductItem from './Product.vue'
  export default {
     components: { ProductItem },
     created: () {
        this.items = [...] // as noted above
     },
     computed: {
         sorted () {
             return this.items.sort( (a,b) =&gt; b.cost - a.cost); // cost is not accessible!
         }
     }
  }
  &lt;/script&gt;
  </code></pre>