javascript - Vue コンポーネント データから計算された関数

Question

次の Vue コンポーネントとデータがあります。

    Vue.component('receipt', {
    template: '#receipt-template',
    data: function() {
        return {
            tip: 8.50
        };
    },
    computed: {
        subtotal: function() {
            return this.sales.price;
            console.log(this.sales.price);
        }
    },
    props: ['header', 'date', 'sales' ]
})

new Vue({
    el: '#content',
    data: {
        sales1: [
            {amount: 1, desc: 'A book title', price: 13.99},
            {amount: 3, desc: 'An espresso title', price: 5.00},
            {amount: 6, desc: 'A drink title', price: 4.25},
            {amount: 2, desc: 'A pastrt', price: 3.99}
        ],
        sales2: [
            {amount: 1, desc: 'A title', price: 9},
            {amount: 2, desc: 'An title', price: 0},
            {amount: 3, desc: 'A title', price: 5},
            {amount: 4, desc: 'A ', price: 99}
        ]
    }
})

そして、次のテンプレート:

<div class="page page2 current">

        <!-- Call our custom receipt vue component -->
        <receipt header="Between the Covers &amp; Grinders Café" date="Sept. 23, 2016 10:52 am" :sales="sales1"></receipt>
        <receipt header="Between the Covers &amp; Grinders Café" date="Sept. 25, 2016 3:08 pm" :sales="sales2"></receipt>

        <div class="clearfix"></div>

    </div><!--end page2-->

    <template id="receipt-template">
        <div class="receipt">
                <div class="receipt-header">
                    <h2>{{ header }}</h2>
                </div><!--end receipt-header-->
                <div class="receipt-body">
                    <div class="receipt-labels">
                        <p>Sales</p>
                        <p>{{ date }}</p>
                        <div class="clearfix"></div>
                    </div><!--end receipt-labels-->
                    <div class="receipt-sales">
                        <div class="receipt-sale-row" v-for="sale in sales">
                            <p>{{ sale.amount }}</p>
                            <p>{{ sale.desc }}</p>
                            <p class="sale-price">${{ sale.price }}</p>
                        </div><!--end receipt-sale-row-->
                    </div><!--end receipt-sales-->
                    <div class="receipt-subtotals">
                        <p>Subtotal</p>
                        <p>{{ subtotal }}</p>
                        <p>Tax</p>
                        <p>$2.64</p>
                        <div class="clearfix"></div>
                    </div><!--end subtotals-->
                    <div class="receipt-totals">
                        <p>Tip</p>
                        <p>{{ tip }}</p>
                        <p>Total</p>
                        <p></p>
                        <div class="clearfix"></div>
                    </div><!--end totals-->
                    <div class="receipt-card">
                        <p>Visa 1825</p>
                        <p>$41.25</p>
                        <div class="clearfix"></div>
                    </div><!--end card-->
                </div><!--end receipt-body-->
            </div><!--end receipt-->
    </template>

「小計」の計算方法がわかりません。私がする必要があるのは、計算された関数「subtotal」が各「sales」オブジェクトのすべての価格の合計を返すようにすることです。私は何を間違っていますか？