php - Vue 2.6.11 doesnt work correctly on Laravel 7

I've started creating webpage using Laravel and Vue. I created the Laravel, run npm install and then npm run dev.

Then I created a vue component and called it from the blade.php, all showed ok, but the function submit.prevent is doesn't work and I don't know why.

Here is my component

<template>
    <div>
        <form role="form" @submit.prevent="submit">
            <div class="form-group">
                <label for="name">Name</label>
                <input type="text" class="form-control" v-model="fields.name" />
            </div>

            <button type="submit" class="btn btn-primary">Create</button>
        </form>
    </div>
</template>

<script>
    export default {
        props: [
        ],

        data() {
            return {
                fields: {},
            }
        },

        methods: {
            submit() {
                console.log('adfs');
            },
        },
    }
</script>

Is very simple but when I push on the button of submit, the page refresh and send the data to the same page.

Solution:

Vue.js can handle form submit event.

<form role="form" @submit.prevent="submit">

This line is in fact preventing submit event and then it trigger it.

Try this instead:

<form role="form" @submit.prevent="onSubmit">

....

    methods: {
        onSubmit() {
            console.log('adfs');
        },
    },