组件模板中的“ v-for”问题

Question

当我在模板中制作一个组件时，带有v-的表就可以正常工作。但是，如果您将Test放置在表不再呈现之前。

Vue.component('Calctable',{
    props: ['trans'],
    template:`<span>Test</span><div><table> <tr v-for="(val,index) in trans"> <td><button v-on:click="calcdata.splice(index,1)">&larr;</button></td>
    <td>{{val.CREATEDATE}}</td> <td>{{val.FULLTICKER}}</td> <td>{{val.AANTAL}}</td> <td>{{val.PRICE}}</td> <td>{{val.FEE}}</td><td>{{total(val)}}</td><td><input type="checkbox" ></input></td> </tr>
    <tr><td>{{rowstotal()}}</td></tr> </table></div><p>Hello World</p>`,
    methods: { 
        total: function(val){ 
        return(     (val.AANTAL * val.PRICE * 100 - val.FEE).toFixed(2))

        },
        rowstotal: function(){
            var sum = 0;
            for (let i=0;i < this.trans.length; i++)
            {
                sum += this.trans[i].AANTAL * this.trans[i].PRICE * 100 - this.trans[i].FEE
            }
            return sum.toFixed(2);
        },
        roll: function(){ return "hello"}


    }
})