Vue.jsのデータバインディングとレンダリング

やりたいこと

• テーブルの tr を初期表示で５行作成
• 「追加する」ボタンを押すと１行ずつ tr が複製される
• tr 中にあるフォームデータは後で送信したいので v-model でデータバインディング

コード

app.vue

//テンプレート
<template>
    <section class="section">
        <table>
            <tr v-for="(item, index) in items">
                <td><input type="text" v-model="items[index].code1"></td>
                <td><input type="text" v-model="items[index].code2"></td>
                <td><input type="text" v-model="items[index].name"></td>
            </tr>
        </table>

        <div class="medium-4">
            <div class="button" @click="add">追加する</div>
        </div>
    </section>
</template>

//スクリプト
<script>
    export default {
        mounted() {
            console.log('Component mounted.')
        },
        data() {
            return {
                items: []
            }
        },
        created() {
            var $defaultNum = 5;
            for(var i = 0; i < $defaultNum; i++){
                this.items.push({
                    code1: '',
                    code2: '',
                    name: ''
                });
            }
        },
        methods: {
            add() {
                this.items.push({
                    code1: '',
                    code2: '',
                    name: ''
                });
                console.log("hoge");
            }
        }
    }
</script>