Ask your predecessors to answer the questions you encounter with the form tag in vue!

newcomers began to learn VUE, to emulate the example on the Internet to achieve an example of form generation and deletion, the actual process encountered a problem, in the html tag code I added an additional form tag will not be able to run normally, after removal, the example on the Internet is not added.
shouldn"t all the relevant elements of the form be placed in the from tag? It"s a mistake to add the form tag instead!
removing the from tag at runtime will make it normal

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue "></script>
</head>

<body>
    <div id="frome_table">
        <form>
            <fieldset>
                <legend>vue </legend>
                <div>
                    <label>name:</label>
                    <input type="text" v-model="new_person.name">
                </div>
                <div>
                    <label>age:</label>
                    <input type="text" v-model="new_person.age">
                </div>
                <label>sex:</label>
                <select v-model="new_person.sex">
                    <option>1111111</option>
                    <option>2222222</option>
                </select>
                <button v-on:click="create_person">test</button>
            </fieldset>
        </form>
        <table>
            <thead>
                <tr>
                    <th>11</th>
                    <th>11</th>
                    <th>11</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="person in item">
                    <td>{{person.name}}</td>
                    <td>{{person.age}}</td>
                    <td>{{person.sex}}</td>
                    <td>
                        <button>del</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
<script>
    new Vue({
        el: "-sharpfrome_table",
        data: {
            new_person: {
                name: "", age: "", sex: ""
            },
            item: [{
                name: "Jack",
                age: 30,
                sex: "Male"
            },
            {
                name: "Jack",
                age: 30,
                sex: "Male"
            }]
        },
        methods: {
            create_person: function () {
                //alert(1)
                this.item.push(this.new_person)
                this.new_person = { name: "999", age: "999", sex: "999" }
            }
        }
    })

</script>

</html>