Vue 3（Nuxt 3）项目中@submit.prevent在移动端浏览器失效问题求助

各位大佬好，我最近在Nuxt 3环境里写了个简单的Vue 3登录组件，遇到了个特别头疼的问题：我给表单加了@submit.prevent="login()"来阻止默认的页面刷新行为，桌面端浏览器里完全正常，但到了移动端不管是iOS的Safari/Chrome，还是Android的Chrome，不管点击提交按钮还是按回车，页面都会直接刷新，完全没触发我写的login逻辑，也没拦住默认行为。

我试过各种办法，比如在login函数里手动调用event.preventDefault()，甚至把指令改成@submit.prevent.stop，但都没用。下面是我的组件代码，麻烦大家帮忙看看问题出在哪，万分感谢！

<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>

备注：内容来源于stack exchange，提问作者Rasmus Lian