[Vuejs]-Adding vue js dynamic form elements in a specific div

This is how i did it

The html

    <div id="app">
   <div id="appendsurface"></div>
                <div v-for="(row, index) in rows">

                    <p><input type="text" v-model="row.title"></p>
                    <p><input type="text" v-model="row.description"></p>
                    <p>
                        <label class="fileContainer">
                            {{row.file.name}}
                            <input type="file" @change="setFilename($event, row)" :id="index">
                        </label>
                    </p>
                    <p>
                        <a v-on:click="removeElement(index);" style="cursor: pointer">Remove</a>
                    </p>


                </div>
        <div>
            <button class="button btn-primary" @click="addRow">Add row</button>
        </div>
    </div>

and then the javascript

var app = new Vue({
            el: "#app",
            data: {
                rows: []
            },
            methods: {
                addRow: function() {
                
                    var elem = document.createElement('div');
                    elem.className= "uniqueclass";

                    document.getElementById('appendsurface').appendChild(elem);  
                
                    this.rows.push({
                        title: "",
                        description: "",
                        file: {
                            name: 'Choose File'
                        }
                    });
                },
                removeElement: function(index) {
                    this.rows.splice(index, 1);
                },
                setFilename: function(event, row) {
                    var file = event.target.files[0];
                    row.file = file
                }
            }
        });

a working codepen https://codepen.io/gandalf8080/pen/poRMopG