Problem using the confirm with a form

[agares29]

I want to show a confirm before submitting the form, but when I use the enter to make the submit, the confirm is getting auto accepted, I mean it shows the confirm but disappears automatically and I'm getting a true as response, here is an example of my code:

<form @submit.prevent="submit">
          <v-col cols="12" md="4">
            <form-group :validator="$v.form.name">
              <v-text-field
                slot-scope="{ attrs }"
                v-bind="attrs"
                v-model="form.name"
                label="Nombre"
                @input="$v.form.name.$touch()"
                outlined
              ></v-text-field>
            </form-group>
          </v-col>
          <v-col cols="12" class="text-right">
            <v-btn color="success" type="submit"> Guardar </v-btn>
          </v-col>
</form>

<script>
export default {
    methods: {
    async submit() {
      this.$v.$touch();
      if (this.$v.$invalid) return console.log("Formulario Inválido.");

      let respuesta = await this.$confirm(
        "Se editará el registro del usuario, ¿Desea continuar?"
      );

      if (!respuesta) return false;

      this.form._method = "put";
      this.$inertia.post(
        route("usuarios.update", { id: this.usuario.id }),
        this.form
      );
    },
  },
}
</script>

It works fine if I click the button, but working funny when I use the enter.

[yariksav]

Did you try add .stop to submit event?

<form @submit.stop="submit">

[agares29]

Already try that, but did not work, also tried with

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

And changing the form for a v-form, but none of those worked :(