vue.js elementui input 配列で動的に追加

inputフィールドを動的に追加したい。
その時の考え方。
component化することが大切。

main.vue

<template>
    <div>

        <el-form :model="form" :rules="rules" ref="form">

            <InputComponent
                    v-for="(v,key) in form.url"
                    :key="key"
                    v-model="form.url[key]"
                    placeholder="ここにサンプル"
                    name="body"
                    @blurData="blurData"
            ></InputComponent>

            <div style="text-align: right;">
                <el-button @click="addHairetu">さらに追加</el-button>
            </div>

        </el-form>

    </div>
</template>

<script>
    import InputComponent from "./InputComponent";

    export default {
        components:{
            InputComponent
        },


        data () {
            return {

                form: {

                    url: ['https://love-letter.club/to/amichan_555/','ほげらま'],
                },
                rules: {
                    name: [
                        { required: true, message: '名前を入力してください', trigger: 'change' }
                    ]
                }
            };
        },



        methods: {

            blurData(e){
                console.log(e.target.value);//フォームの中身を取得
            },

            addHairetu(data){
                this.form.url.push('');
                return data;
            },




        }
    }
</script>

InputComoponent.vue

<template>

    <el-input
            :name="name"
            :value="value"
            :placeholder="placeholder"
            @input="updateValue"
            @blur="blurValue"

    >
    </el-input>



</template>

<script>
    export default {
        name: "InputComponent",
        props: {
            value: { type: String, require: true },
            name: { type: String, require: true },
            placeholder: { type: String, require: false },
            cols: { type: Number, require: false }
        },
        methods: {
            updateValue(e) {
                //親メソッドの input を動かす
                //普通のテキストエリアと違うので注意
                this.$emit("input", e);
            },
            blurValue(e) {
                //親メソッドの blurData を動かす
                this.$emit("blurData", e);
            }
        }
    };
</script>