Как я могу назначить вычисленные свойства для данных с Vue.js?

Question

В моей системе CMS я могу добавлять страницы. Я также хочу отредактировать существующее содержимое этих страниц.

Я пытаюсь достичь:

• Пользователь редактирует страницу
• Обновления страницы в том же документе Firebaseгде он был создан
• Страница отображает новый контент

Сейчас я настроил getter и setter в computed, где getter получает данные из коллекции firebase и предоставляет соответствующий текстЯ хочу отредактировать, и установщик примет изменения, которые я делаю с этим текстом.

  data: () => ({
    title: null,
    content: null
  }),
  computed: {
    pages: {
      get() {
        return this.pageIndex
      },
      set() {
        this.title
        this.content
      }
    }
  },

Чтобы обновить документ в firebase, я запускаю этот метод:

  methods: {
    async update(id) {
      return db
        .collection('PAGES')
        .doc(id)
        .set({
          title: this.title,
          content: this.content
        })
        .then(() => {
          return this.fetchPage()
        })
    },
}

Но этоотправляет это в моем документе firebase:

  title: null
  content: null

В консоли это показывает неопределенный. При публикации данных, как с массивом или объектами, они публикуют все внесенные мной изменения. Но это моя проблема, я не хочу публиковать его как объект или массив, я пытаюсь публиковать его как имена полей внутри документа.

Текущий способ, которым я это делаю, приводит к следующему:

Что можно изменить, чтобы опубликовать обновленный заголовок и содержимое?

Редактировать:

Если я сделаю это таким образом, он будет публиковать данные, но публиковать их как объект и массив:

  data: function() {
    return {
      updatedPayload: {
        title: null,
        content: null
      }
    }
  },
  computed: {
    pages: {
      get() {
        return this.pageIndex
      },
      set() {
        this.updatedPayload = { title: this.title, content: this.content }
      }
    }
  },
  methods: {
    async update(id) {
      //  return db.doc(`pages/${page.id}`)
      const self = this
      const pages = self.pages
      return db
        .collection('PAGES')
        .doc(id)
        .set({ pages })
        .then(() => {
          return this.fetchPage()
        })
    }
  }

Вот HTML

  <tbody v-for="(page, idx) in pages" :key="page" class="">
    <b-input v-model="page.title"></b-input>
    <VueEditor v-model="page.content"></VueEditor>
  </tbody>

Итак, дилемма в том, что я могу обновлять данные только с помощью объекта, но я не могу обновить данные с помощью имени поля, как оно появляется.

ОП этот поток пытается достичь того же результата, что и я, заполняет данные для поля ввода, где в качестве ввода отображается существующая информация,и может заполнить новые данные. В моем случае мне нужно 2 входа для заполнения новых данных, он уже отображает существующие данные из базы данных.