Как удалять и редактировать записи в FireBase, используя Vue js

Question

Я новичок в javascript и веб-дизайне в целом, и я пытаюсь узнать, как использовать Vue js для создания, чтения, обновления и удаления данных в базе данных реального времени с использованием Firebase, используя это учебник . Учебное пособие было весьма полезным, мне удалось настроить Vue CLI, установить Vuefire и firebase и создать проект, который может успешно добавить список имен в мою базу данных firebase. Тем не менее, я застрял, когда дело дошло до удаления и редактирования имен. Вот ошибка, которую я получаю:

Error: "Reference.child failed: First argument was an invalid path = "undefined". Paths must be non-empty strings and can't contain ".", "#", "$", "[", or "]""
validatePathString index.cjs.js:1669
child index.cjs.js:13845
setEditName App.vue:86
click App.vue:68

То, как я это вижу, означает, что аргумент '.key', который я использую в removeName и других функциях, недопустим, либо потому, что не определено, пусто или содержит символы, перечисленные в ошибке. Так что, если это не способ редактировать и удалять записи в базе данных реального времени Firebase, используя Vue js, то как это сделать?

Вот код:

Приложение. vue

<div>
    <ul>
      <li v-for="personName of names" 
        v-bind:key="personName['.key']">
        <div v-if="!personName.edit">
          <p>{{personName.name}}</p>
          <button @click="removeName(personName['.key'])">
            Remove
          </button>
          <button @click="setEditName(personName['.key'])">
            Edit
          </button>
        </div>
        <div v-else>
          <input type="text" v-model="personName.name">
          <button @click="saveEdit(personName)">
            Save
          </button>
          <button @click="cancelEdit(personName['.key'])">
            Cancel
          </button>
        </div>
      </li>
    </ul>
  </div>

Вот функции для работы с базой данных CRUD:

removeName(key) {
  namesRef.child(key).remove();
},
// This function updates the name under a specific key
// in the firebase db hence editting a name
setEditName(key) {
  namesRef.child(key).update({ edit: true });
},
// Create function for cancelling edit
cancelEdit(key) {
  namesRef.child(key).update({ edit: false })
},
// Function for saving edits
saveEdit(person) {
  const key = person['.key']
  // Set overwrites the current data
  namesRef.child(key).set({ name: person.name, 
  edit: false })
}

Ваша помощь будет высоко оценена. Заранее спасибо.