Как компонент vue получает ObjectId из mongodb

Question

Я хочу, чтобы компонент vue (TodoItem) получал ObjectId из mongodb.

Вот как работает мой TodoApp:

1. TodoApp использовать Vue, экспресс, mongodb
2. Он также использует Vuex для хранения состояния изменений
3. Существует два основных компонента: TodoList для родителя и TodoItem для ребенка
4. При создании / чтении / обновлении / удалении данных TodoList / TodoItem вызывает действия Vuex.

TodoList получает данные Todo из mongodb, вызывая retrieveTodos затем retriveTodos получает данные Todo из MongoDB и сохраняет их в состоянии vuex.

TodoList.vue

<template>
  <div>
    <input type="text" class="todo-input" placeholder="해야할 일" v-model="newTodo" @keyup.enter="addTodo">
    <draggable v-model="todosFiltered" group="todos" @start="drag=true" @end="drag=false">
      <transition-group name="fade" enter-active-class="animated fadeInUp" leave-active-class="animated fadeOutDown">
      <todo-item v-for="todo in todosFiltered" :key="todo._id" :todo="todo" :checkAll="!anyRemaining">
      </todo-item>
      </transition-group> 
    </draggable>

      <div class="extra-container">
        <todo-check-all></todo-check-all>
        <todo-items-remaining></todo-items-remaining>
      </div>

      <div class="extra-container">
        <todo-filtered ></todo-filtered>

        <div>
            <transition name="fade">
                <todo-clear-completed></todo-clear-completed>
            </transition>
        </div>
      </div>
  </div>
</template>

...

created() {
      this.$store.dispatch('retrieveTodos')
},

Проблема в TodoItem

TodoItem.vue

<template>
    <div class="todo-item">
        <div class="todo-item-col">
            <div class="todo-item-left">
              <input type="checkbox" v-model="completed" @change="doneEdit">
              <double-click v-if="!editing" @single-click="recordTodo" @double-click="editTodo" class="todo-item-label" :class="{ completed : completed }">{{ priority }} {{ title }}</double-click>
              <input v-else class="todo-item-edit" type="text" v-model="title" @blur="doneEdit" @keyup.enter="doneEdit" @keyup.esc="cancelEdit" v-focus>  
            </div>
            <div v-if="recording" v-click-outside="doneRecord" @keyup.enter="doneRecord" @keyup.esc="cancelRecord">
              <input type="date" class="todo-item-date" v-model="due"> 
              <input type="text" class="todo-item-note" v-model="note" v-focus placeholder="내용을 기록하세요">
            </div>
        </div>
        <div>
            <button @click="pluralize">Plural</button>
            <span class="remove-item" @click="removeTodo(todo._id, todo.priority)">
                &times;
            </span>
        </div>

    </div>
</template>

...

    props: {
        todo: {
            type: Object,
            required: true,
        },
        checkAll: {
            type: Boolean,
            required: true,
        }
    },
    data() {
        return {
            '_id': this.todo._id,
            'priority': this.todo.priority,
            'title': this.todo.title,
            'due': this.todo.due,
            'note': this.todo.note,
            'completed': this.todo.completed,
            'expired': this.todo.expired,
            'editing': this.todo.editing,
            'recording': this.todo.recording,
            'beforeEditCache': '',
            'beforeNoteCache': '',
        }
    },

В TodoItem только _id, ObjectId данных mongodb, не сохраняется. все остальные свойства, кроме _id, сохранены

Как я могу это исправить?

(этот код взят из учебника этого курса на YouTube https://www.youtube.com/watch?v=Ork8274eqYo&list=PLEhEHUEU3x5q-xB1On4CsLPts0-rZ9oos&index=5)

Я пытался:

1. Я проверил, что данные хорошо хранятся в состоянии Vuex после чтения из Mongodb (retrieveTodo). но хорошо хранится даже ObjectID (я проверял это на консоли)

2. если я попытался использовать this._id в TodoItem, он возвращает неопределенное значение

doneEdit() {
          if(this.title.trim() == '') {
              this.title = this.beforeEditCache
          }
          this.editing = false
          console.log('doneEdit ', this._id)
          this.$store.dispatch('updateTodo', {
            '_id': this._id,
            'priority': this.priority,
            'title': this.title,
            'due': this.due,
            'note': this.note,
            'completed': this.completed,
            'expired': this.expired,
            'editing': this.editing,
            'recording': this.recording,
          })
        },