Untitled

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app">
        <form>
            <label for="name">
                Name:
                <br>
                <input type="text" id="name" v-model.lazy="name">
            </label>
            <br>
            <label for="phone">
                Phone:
                <br>
                <input type="text" id="phone" v-model.lazy="phone">
            </label>
            <br>
            <label for="mail">
                Phone:
                <br>
                <input type="text" id="mail" v-model.lazy="mail">
            </label>


            <br><button class="btn btn-primary" v-on:click="alertForm">Отправить</button>
        </form>
    </div>

</body>

<style>
    body {
        margin: 40px auto 0;
        width: 80%;
    }
</style>

<script>
    let app = new Vue({
        el: "#app",
        data: {
            name: '',
            phone: '',
            mail: ''
        },
        methods: {
          alertForm() {
              // !this.message ? alert('Empty') : alert(this.message)


          }
        }
    })
</script>
</html>