Help me to add data in an array of Vue.JS from html

Guys I am stuck on my assignment where I am not able to add data from html to the array of VUE.JS I have build this form now what I want is when user complete this form and press Add a new student button it supposed to add all the data inside Students array in vue.js but Idk how to update the array with pressing of a button here is my full code if someone can help me with that it will be awesome and also help me to make this delete button work like it delete the row when you press it :slight_smile:

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style type="text/css">

        <!--

        /* @import url("css/tablestyle.css");

        @import url("css/form.css"); */

        -->

    </style>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

    <style>

        .agreeGreen {

            color: Green;

        }

        .agreeRed {

            color: Red;

        }

    </style>

</head>

<body>

    <div id="app">

        <h2>Student Information Collection</h2>

        <hr>

        <form class="basic-grey">

            <div class=" form-group">

                <label for="name">Student Name:</label><input id="name" type="text">

            </div>

            <label>Gender:</label>

            Male<input type="radio">

            Female<input type="radio"> <br /><br />

            <label for="age">Age:</label><input id="age" type="number"> <br /><br />

            <label>Country:</label>

            <select>

                <option  disabled selected value="">Please select your country</option>

                <option v-for="country in countries"></option>

                <option>{{country.China}}</option>

                <option>{{country.Zambia}}</option>

                <option>{{country.Pakistan}}</option>

                <option>{{country.Bangladesh}}</option>

                <option>{{country.India}}</option>

            </select>

            <label>Hobby:</label>

            <span><input type="checkbox" >Study</span>

            <span><input type="checkbox" >Play Video Games</span>

            <span><input type="checkbox" >Travelling</span>

            <span><input type="checkbox" >Eating</span>

            <br /><br />

            <label>Other Information:</label>

            <textarea></textarea> <br /><br />

            <input type="checkbox"><span>Agree receive our

                promotions.</span><br><br>

            <button type="submit" class="button">Add a new student</button>

        </form>

        <h2>Students list</h2>

        <hr>

        <table id="rounded-corner">

            <thead>

                <th class="rounded-company">Name</th>

                <th>Gender</th>

                <th>Age</th>

                <th>Country</th>

                <th>Hobby</th>

                <th>Receive Promotions</th>

                <th class="rounded-q4">Operation</th>

            </thead>

            <tbody>

                <tr v-for="student in students">

                    <td>{{student.name}}</td>

                    <td>{{student.gender}}</td>

                    <td>{{student.age}}</td>

                    <td>{{student.country}}</td>

                    <td>{{student.hobby}}</td>

                    <td>{{student.agree}}</td>

                    <td><a href="">Delete</a></td>

                </tr>

            </tbody>

        </table>

    </div>

    <script>

        const vm = new Vue({

            el: '#app',

            data: {

                student: {

                    name: "",

                    gender: "male",

                    age: 0,

                    country: "",

                    hobby: [],

                    otherInformation: "",

                    agree: ""

                },

                students: [{

                        name: "Mike",

                        gender: "male",

                        age: 23,

                        country: "ZM",

                        hobby: ["Studying"],

                        otherInformation: "I want say nothing but try your best.",

                        agree: false

                    },

                    {

                        name: "Emma",

                        gender: "famale",

                        age: 18,

                        country: "PK",

                        hobby: ["Playing Game",

                            "Travelling"

                        ],

                        otherInformation: "Please contact me anytime.",

                        agree: true

                    },

                    {

                        name: "Emily",

                        gender: "famale",

                        age: 20,

                        country: "BD",

                        hobby: ["Studying", "Eating", "Travelling"],

                        otherInformation: "Tell me your problem.",

                        agree: false

                    }

                ],

                country: {

                    China: "CN",

                    Zambia: "ZM",

                    Bangladesh: "BD",

                    India: "IN",

                    Pakistan: "PK"

                   

                },

             

                hobbies: ["Studying", "Playing Game", "Eating", "Travelling"]

            },

        });

    </script>

</body>

</html>

anyone ? :zipper_mouth_face: