Vue-通过v-bind传递的数组在计算属性中为空

从这个小例子开始,我正在做我在vue中的第一步。我试图根据提供的数据得到一个项目的总和。(完整的示例可以在 this jsffile )

组成部分:

Vue.component('items-table', {
    props: ['items', 'item', 'total'],
    template: `
        <div>
                <table>
                <thead>
                    <tr>
                        <th>Description</th>
                        <th>Price</th>
                    </tr>
                </thead>
                <tbody>
                    <tr
                        v-for="item of items"
                        v-bind:key="item.id"
                    >
                      <td>{{item.desc}}</td>
                      <td class="price">{{item.price}}</td>
                    </tr>
                </tbody>
            </table>


            <div>Total items: {{items.length}}</div>
            <div>Total price: {{total}}</div>
        </div>
    `
});

在下面的应用程序中,控制台打印一个空数组,因此始终返回0:

new Vue({
  el: '#app',
    data:{
        items: []
    },
    computed: {
        total: function(){
            console.log(this.items);
            return this.items.reduce(function(total, item){

                return total + item.price;
            },0);
        }
    },
    mounted() {
        console.log('app mounted');
    }
});

最后,我将提供用于显示、操作和进行一些计算的初始数据:

<div id="app">
  <items-table v-bind:total="total" v-bind:items="[
            { id: 1, desc: 'Banana', price: 10 },
            { id: 2, desc: 'Pen', price: 5 },
            { id: 3, desc: 'Melon', price: 5 }
        ]"></items-table>

</div>

我的问题是{{total}中的价格之和总是0。当通过v-bind提供items数组时,似乎从未设置过它:items(不是reactive?)我提前感谢你的帮助。

编辑:背景

所有将用于组件的数据都来自PHP纯文件。CRUD操作尚不可用。表示可以直接从标记绑定数据是非常重要的。