Как при нажатии на кнопку "Save " сохранить данные,а на "Cancel" не сохранять введенное в поле?

У меня такая архитектура. Когда я ввожу данные в поле в TaskDetailsModal.Vue и нажимаю кнопку «Сохранить», мне нужно везде менять эту задачу, а когда я нажимаю кнопку «Закрыть», я, наоборот, не сохраняю изменения. Я не могу передать или изменить эту конкретную задачу, как я могу это сделать?

Tasks.vue

data () {

const tasks: TaskInterface[] = [
  {
    name: 'Create app',
    description1: 'Use smth',
    time: '02.12.2021',
    status: STATUS.TODO
  },
  {
    name: 'Fix bugs',
    description1: 'Fix all bugs',
    time: '02.12.2021',
    status: STATUS.INPROGRESS
  },
  {
    name: 'Fixx bugs',
    description1: 'Fix all bugs',
    time: '02.12.2021',
    status: STATUS.DONE
  }
]

AppSection.vue

<template lang="pug">
section
  .content()
    router-view(:tasks='tasks')

</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { emitter } from '../main'
import { TaskInterface } from '@/types/task.interface'

export default defineComponent({
  name: 'app-section',

  data () {
    const tasks: TaskInterface[] = []
    return {
      tasks
    }
  },
  mounted () {
    emitter.on('giveTasks', tasks => {
      this.tasks = tasks as TaskInterface[]
    })
  }
})
</script>

Kanban.vue

<template lang="pug">
.kanban
  .statuses
    .todo
      span To do
        tasks-order-by-status(:tasks = 'taskTodo')
    .inprogress
      span In Progress
        tasks-order-by-status(:tasks = 'taskInprog')
    .done
      span Done
        tasks-order-by-status(:tasks = 'taskDone')
</template>

<script lang="ts">
import { defineComponent } from 'vue'


export default defineComponent({
  components: {
    TasksOrderByStatus
  },
  props: ['tasks'],

TaskOrderByStatus.vue

<template lang="pug">
.asd(v-if="Object.keys(this.task).length !== 0")
  task-details-modal(:showDetailsModal = 'showDetailsModal' :task = 'task')
.task(v-for='(task, index) in tasks' :key='task.index'  class="list-item" draggable="true" @dragstart="startDrag($event, task)" @click="openModal(index)")
      .card()
        .name()
          | {{task.name}}
        .deadline
          | {{task.time}}
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import STATUS from './../enums/TaskStatusEnum'
import TaskDetailsModal from '@/components/TaskDetailsModal.vue'
import { emitter } from '../main'

export default defineComponent({
  name: 'tasks-order-by-status',
  props: ['tasks'],
  components: {
    TaskDetailsModal
  },

TaskDetailsMOdal.Vue

<template lang="pug">
.modal-task(:style="{display: showDetailsModal}")
    .modal-task-details
        .task
            .name(v-show="show")
                |Name: {{updatedTask.name}}
            .text(v-show="!show")
                textarea(v-model='updatedTask.name')
            .status
                |Status: {{updatedTask.status}}
            .deadline
                |Deadline: {{updatedTask.time}}
            .description(v-show="show")
              |description: {{updatedTask.description1}}
            .text(v-show="!show" @change="handleChange")
                textarea(v-model='updatedTask.description1')
        button(class='add-task' v-on:click="show=!show" v-show="show") Edit
        button(class='add-task' v-on:click="show=!show" v-show="!show" @click="closeForm()") Close
        button(class='add-task' v-show="showSaveButton" @click="saveTask(task)") Save
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { emitter } from '../main'

export default defineComponent({
  name: 'task-details-modal',
  props: ['showDetailsModal', 'task'],
  data () {
    return {
      show: true,
      showSaveButton: true,
      updatedTask: {
        name: '',
        description1: '',
        time: '',
        status: ''
      }
    }
  },
  methods: {
    closeForm () {
      emitter.emit('close', this.task)
      // console.log(this.updatedTask)
    },
    saveTask () {
      emitter.emit('save', this.updatedTask)
    },
    handleChange () {
      this.showSaveButton = true
    }
  },
  created () {
    this.updatedTask = JSON.parse(JSON.stringify(this.task))
  }
})
</script>