vue.jsでfirebaseを使用してデータの編集処理をしたい

Question

Vue.js初心者です。

firebaseを使った編集処理を実装しようとしているのですが、つまづいています。(crud機能)

モーダルを表示するところまでは正しく動作(選択したbookが表示)しているのですが、モーダル内の編集ボタンを押すと毎回booksの中の最後のbookが書き換えられてしまいます。

booksはvuexを使って取っています

<li v-for="(book, index) in books" :key="index">
        本のタイトル: <p>{{book.title}}</p>
        <div id="edit-main" v-if="showModal" @click.prevent="changeModal">
          <div id="content" @click.stop>
            <span class="close" @click.prevent="changeModal">x</span>
            <h4>編集</h4>
              <label for="title">本の名前:</label>
              <input type="text" placeholder="本の名前" v-model="bookItem.title">
              <textarea placeholder="本の感想" v-model="bookItem.text"></textarea>
              <b-button variant="warning" @click.prevent="editBook(bookItem, index)">編集</b-button>
          </div>
        </div>
        <b-button variant="warning" @click.prevent="changeModal(book)">編集</b-button>
        <b-button variant="danger" @click.prevent="deleteBook(index)">削除</b-button>
      </li>
<script>
import {mapState} from 'vuex'
import firebase from 'firebase'
import'firebase/database'

export default {
  data() {
    return {
      bookItem: '',
      title: '',
      text: '',
      showModal: false
    }
  },
  computed: {
    ...mapState(['books'])
  },
  created() {
    this.$store.dispatch('getAllBook')
  },
  methods: {
    changeModal(book) {
      if(this.showModal === true) {
        return this.showModal = false
      } else {
        this.bookItem = book
        return this.showModal = true

      }
    },
    editBook(book, key) {
      var update = {}
      update['/posts/' + key] = book
      firebase.database().ref().update(update)
    },
    deleteBook(id){
      return this.$store.dispatch('deleteBook', id)
    }
  }
}
</script>

Object.assign(book, update)は画面上では狙い通りになりますが、firebaseには変更点が上がらずでした。(予想通り)

もしくは違う書き方の方がわかりやすいものがあるのでしょうか？

editBook内の処理に問題があるのかなと予想していますが、原因がわからず困っています。

どなたか知恵を貸していただきたいです

vue 2.6.11