Vue component table adding row – Blancer.com Tutorials and projects

I’m creating tabe by Vue component. I want to add rows in table by clicking on button “Add”. But it works wrong way. When I’m clicking button “Add”, I’m seeing that row adding to the table, but it immediatly removing back. I’m suggesting that it happands because of Vue reactivity, but I could not undersand what I’m doing wrong. Please show me where is my mistake.

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Titles</title>
</head>
<body>

<form id = "app" >
    <conf-table v-on:add-panel="addPanel" :table = "tabledata" ></conf-table>
</form>

<template id = "table-template">
    <div>
        <table class="lowertable">
            <tr>
                <th width="220"><div id= "ConvHeader">No.</div></th>
                <th width="130" >Panel</th>
            </tr>
            <tr v-for="(elem, index) in table" :key = "index">
                <td >{{elem.id}}</td>
                <td ><input id = "convConfTable_nr" name="" type="search" :value=elem.name /></td>
            </tr>
        </table>
        <input v-on:click="addPanelChild" class="button" name="button" type="submit" value="Add" />        
        </div>
</template>

</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script th:inline = "javascript">
    

    var tableData = [];

    Vue.component('conf-table', {
        template: "#table-template",
        props: ['table'],
        methods: {
            addPanelChild: function() {

                this.$emit("add-panel");
            },
        }});

    var vueApp = new Vue({
        el: "#app",
        data: {
            tabledata:  tableData,

        },
        methods: {
            addPanel: function() {

                var panel = {
                    id: 77,
                    name: "Qwerty"
                };

                this.tabledata.push(panel);
            }
        }
    })  

</script>

</html>