Vuejs上的动态表单输入

在我的表单中,我需要创建一个方法来动态添加表单字段以“添加新用户”,并将它们推送到我的数据数组中 founders: [] . 我的输入需要添加到表单中,只是隐藏在 <div id="new-user"> 具有 display:none 因此,我需要弄清楚,当用户按下“添加新用户”按钮并同时按下数据时,如何在准确的位置正确显示表单字段。

addFounderGrant() {
        var elem = document.createElement('#new-user'); //This part I need help
        this.step3.foundersGrants.push( {
            email:'',
            first_name:'',
            last_name:'',
            issue_date:'',
            certificate:'',
            share_price:'',
            shares_amount: '',
        } )
    },

我也尝试过这种方法,这里我的显示表单字段工作正常,但数据存储错误,对我来说太复杂了。

addFounder() {
        var counter = 0;
            counter++;
            var newFields = document.getElementById('new-user').cloneNode(true);

            newFields.id = '';
            newFields.style.display = 'block';
            var newField = newFields.childNodes;
            for (var i=0;i<newField.length;i++) {
                var theName = newField[i].name
                if (theName)
                    newField[i].name = theName + counter;
            var insertHere = document.getElementById('writeroot');
            insertHere.parentNode.insertBefore(newFields,insertHere);
        }
        this.step3.foundersGrants.push( {
            email:'',
            first_name:'',
            last_name:'',
            issue_date:'',
            certificate:'',
            share_price:'',
            shares_amount: '',
        } )
    },

第三天,我在为这件事挣扎,请告诉我最简单的方法是什么?