Updating boolean value with cloud firestore in Vue

I'm new to both Vue and Firebase. So I'm trying to implement a very simple library app with both. However, the updating function only updates the value of the attribute 'read' once. What am I doing wrong?

This is the template and the function in App.vue :

<template>
  <div id="app">
    <Header />
    <AddBook v-on:add-book="addBook" />
    <Books v-bind:books="books" v-on:del-book="deleteBook" v-on:update-book="updateBook" />
  </div>
</template>

updateBook(id, book) {
  console.log(book);
  db.collection("books")
    .doc(id)
    .update({
      read: !book.read,
    })
    .then(() => {
      console.log("Book successfully updated!");
    })
    .catch((error) => {
      console.error("Error updating book: ", error);
    });
}

And I'm passing the data with $emit from Book.vue :

<template>
  <div class="book" v-bind:class="{ 'is-read': book.read }">
    <p></p>
    <p></p>
    <input
      type="checkbox"
      v-on:change="$emit('update-book',book.id, book)"
      v-bind:checked="book.read"
    />
    <button @click="$emit('del-book', book.id)">x</button>
  </div>
</template>

If anyone could help me I'd really appreciate it.