Vue中使用v-for渲染表格

自己写了一个组件叫做t-item，作为表格的每一行，代码如下：

<table border="1">
        <thead>
        <tr>
            <th>A</th>
            <th>B</th>
        </tr>
        </thead>
        <tbody>
        <t-item v-for="(item,index) in tabledata" :text="item.text" :num="item.num"></t-item>
        </tbody>
    </table>

但是出现了奇怪的BUG： 

作为表头的A、B却出现在了外层，使用chrome查看elements：

<div id="app">
        <tr>
            <td>t</td>
            <td>1</td>
        </tr>
        <tr>
            <td>t2</td>
            &l