Редактирование не работает на CRUD, созданном с помощью vue & express & mongo

Question

Я делаю CRUD-приложение, используя Vue.js, Express.js и Mongoose.

Я создал CRD, но событие обновления не работает правильно в компоненте «Правка».

Я пытался найти долгую проблему, но не смог ее решить.

Пожалуйста, помогите мне!

Main.vue

...
<router-link :to="{ name: 'Edit', params: { id: todo._id }}">Edit</router-link>
...

EditForm.vue

<template>
  <div id="todo-edit-form">
    <div> Edit </div>
    title : <input :value="todo.title"> <br />
    content : <input :value="todo.content"> <br />
    <button @click="update(todo._id)" >Edit</button>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      todo: []
    }
  },
  created () {
    let id = this.$route.params.id
    this.$http.get(`/api/todos/edit/${id}`)
    .then((response) => {
      this.todo = response.data
    })
  },
  methods: {
    update (id) {
      this.$http.put(`/api/todos/${id}`, {
        todo: this.todo
        })
      .then(
        (response) => {
          // confirmed that the response contains the original title and content, not the modified content.
          this.$router.push('/todos')
        },
        (err) => {
          alert('Error')
        }
      )
      .catch(function (error) {
        alert('error')
      })
    }
  }
}
</script>

обновление API

router.put('/:id', (req, res) => {
  Todo.findByIdAndUpdate(req.params.id, { $set: req.body }, (err, todo) => {
    if (err) {
      res.status(500).send('Something broke!');
    }
    res.json(todo);
  });
});