Laravel API Login API doesn't work when put inside a function of Nuxt3

I’m new to Nuxt3 and I’ve been working on the login api inside a function. The api call works when it’s outside the function, but when I put it inside a function, it returns a 419 error response.

this is my form:

<div>
    <div class="grid grid-cols-4 gap-5"></div>
    <div class="w-full max-w-xs">
      <form
        class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4"
        method="POST"
        @submit.prevent="onSubmit"
      >
        <div class="mb-4">
          <label class="block text-gray-700 text-sm font-bold mb-2" for="email">
            Email
          </label>
          <input
            class="
              shadow
              appearance-none
              border
              rounded
              w-full
              py-2
              px-3
              text-gray-700
              leading-tight
              focus:outline-none focus:shadow-outline
            "
            id="email"
            type="text"
            name="email"
            placeholder="Email"
            v-model="form.email"
          />
        </div>
        <div class="mb-6">
          <label
            class="block text-gray-700 text-sm font-bold mb-2"
            for="password"
          >
            Password
          </label>
          <input
            class="
              shadow
              appearance-none
              border
              rounded
              w-full
              py-2
              px-3
              text-gray-700
              mb-3
              leading-tight
              focus:outline-none focus:shadow-outline
            "
            v-model="form.password"
            id="password"
            name="password"
            type="password"
            placeholder="******************"
          />
        </div>
        <div class="flex items-center justify-between">
          <button
            class="
              bg-blue-500
              hover:bg-blue-700
              text-white
              font-bold
              py-2
              px-4
              rounded
              focus:outline-none focus:shadow-outline
            "
            type="submit"
          >
            Sign In
          </button>
          <a
            class="
              inline-block
              align-baseline
              font-bold
              text-sm text-blue-500
              hover:text-blue-800
            "
            href="#"
          >
            Forgot Password?
          </a>
        </div>
      </form>
      <p class="text-center text-gray-500 text-xs">
        &copy;2020 Acme Corp. All rights reserved.
      </p>
    </div>
  </div>

and this is my function:

<script setup>
const url = "http://localhost:8085/api/auth/login";

const form = reactive({
  email: "[email protected]",
  password: "jane123",
});

async function onSubmit() {
  const { data, error } = await $fetch(url, {
    method: "POST",
    headers: {
      "x-api-key": "base64:l/KMGWeUbHwHNrlQXOmpFXTafrccJ8KZvlCaTUEkSOw=",
    },
    body: { form },
  });

  console.log(data, error);
}
</script>

I tried ohmyfetch and lazyfetch but it still returns the same error.
but if I use it like this, without the function, it actually works and returns 200 status code. I really don’t understand why it wont work inside a function.

  const { data, error } = await useFetch(
"http://localhost:8085/api/auth/login",
{
  method: "POST",
  headers: {
    "x-api-key": "base64:l/KMGWeUbHwHNrlQXOmpFXTafrccJ8KZvlCaTUEkSOw=",
    "Access-Control-Allow-Origin": "*",
  },
  body: {
    email: "[email protected]",
    password: "janedoe123",
  },
}

);