Как обновить данные списка, когда данные уже отправлены в бэкенд? (VUE/DJANGO)

Я новичок в vue и пытаюсь работать с ним в django. У меня есть поле под названием status, которое использует булево поле и устанавливает значение по умолчанию=False. Я пытаюсь обновить данные в бэкенде по щелчку. Когда я нажимаю на div, данные передаются в parent и обновляют статус до !status.

Child:

<div @click="$emit('update-status', this.task)">{{ task.status}} </div>

Родитель:

<Task v-for="task in tasks"
      :key="task.slug"
      :task="task"
      :slug="task.slug"
      @update-status="updateStatus"/>


async updateStatus(task) {
 let endpoint = `/api/v1/tasks/${task.slug}/`;
 const response = await axios.put(endpoint, {
       status: !task.status,
 
      });
    }

Обновляется один раз и продолжает возвращать одно и то же значение True, когда я продолжаю щелкать (оно всегда должно возвращать противоположное состояние). Мне приходится вручную обновлять браузер, поэтому, когда я снова нажимаю на него, он возвращает False.

Vue.component('task', {
  template: `
    <div @click="$emit('update-status', task)">{{ task.status }}</div>
  `,
  props: {
    task: Object
  }
})

new Vue({
  el: '#demo',
  data() {
    return {
      tasks: [{slug: 'a', status: false}, {slug: 'b', status: false}]
    }
  },
  methods: {
    async updateStatus(task) {
     //let endpoint = `/api/v1/tasks/${task.slug}/`;
     /*const response = await axios.put(endpoint, {
         status: !task.status,
      });*/
      const response = {slug: task.slug, status: !task.status}
      this.tasks = this.tasks.map(t => (t.slug === response.slug) ? response : t)
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <Task v-for="task in tasks"
      :key="task.slug"
      :task="task"
      :slug="task.slug"
      @update-status="updateStatus"/>
</div>

async updateStatus(task) {
      let endpoint = `/api/v1/tasks/${task.slug}/`;
      const data = {
        slug: task.slug,
        status: !task.status,
      };
      const response = await axios.put(endpoint, data);
      this.tasks = this.tasks.map((task) =>
        task.slug === data.slug ? data : task
      );
    
    },