Firestore con Vue3

Estoy realizando un proyecto en Vue3 con Firebase y quiero poder añadir una serie de datos a Firestore a través de un formulario.

El tema es que cuando quiero añadir un nombre y verlo en la consola de firebase no se añade. Cuando hago esta accion muchas veces al final si que se añade, pero solo puedo añadir uno y ya esta. Si intento añadir otro ya no funciona.

Seguramente sea error de codigo pero no logro verlo.

NewPet.vue

<template>
  <main class="page-register">
    <section class="box-auth">
      <router-link to="/"
        ><img class="logo" alt="logo" src="@/assets/icon.svg"
      /></router-link>
      <h1 class="main-title">Nuevo animal</h1>

  <form>
    <div class="form-group">
      <label class="form-label" for="name">Nombre</label>
      <input
        placeholder="Nombre del animal"
        type="text"
        id="name"
        class="form-control"
        v-model="name"
      />
    </div>
    <div class="form-group">
      <label class="form-label" for="location">Localización</label>
      <input
        placeholder="Localización "
        type="text"
        id="location"
        class="form-control"
        v-model="location"
      />
    </div>

    <button @click="register" class="btn btn-primary btn-lg">
      Registrar
    </button>
  </form>
</section>
  </main>
</template>

<script>
import { addPet } from "@/db";
export default {
  name: "NewPet",
  methods: {
    register: function createPet() {
      addPet(this.name, this.location);
    },
  },
};
</script>

db.js

import "@/firebase";

import { getFirestore, collection, addDoc, doc } from "firebase/firestore";

const db = getFirestore();
const petCollection = collection(db, "pets");
export default db;

export async function addPet(name, location) {
  const ref = doc(petCollection);
  addDoc(collection(db, "pets"), {
    name: name,
    location: location,
  });
  console.log("Document written with ID: ", ref);
}

export function getAllPets() {
  // contingut
} 

Donde puedo estar fallando?

Gracias