Vue form @submit.prevent does not work in mobile browsers

I have a Vue 3 component (a Nuxt 3 environment) with just a simple form which I am trying to prevent the default behavior of reloading the page. As many times in other Vue projects I am using @submit.prevent on the form element which works as expected on desktop. However, to my big surprise this does not work in neither iOS (Safari/Chrome) nor Android (Chrome). On mobile when either pressing the button or pressing ‘Enter/Return’ the page reloads. I have tried everything, for example tried manually calling event.preventDefault() and calling @submit.prevent.stop but with no success.

Below is the component code:

<template>
  <div class="login">
    <h1>Log in</h1>

    <form class="login-form" @submit.prevent="login()" id="form">
      <label for="email">Email</label>
      <input type="email" name="email" id="email" v-model="email" />
      <label for="password">Password</label>
      <input type="password" name="password" id="password" v-model="password" />

      <button type="submit" id="submit">Log in</button>
    </form>
  </div>
</template>

<script setup lang="ts">
const email = ref("");
const password = ref("");

async function login() {
  // Login logic
}
</script>

<style lang="scss" scoped>
</style>

If anyone has any insight into this please share, and thank you in advance.