動的なモーダルウィンドウを作成したい

現在VuexでTodoリストの作成をしているのですが投稿id１に対してid1専用のモーダルウィンドウの表示をすることはできたのですが次の段階として編集機能を実装したいと思っています。
id1の投稿に対してid1の投稿内容の更新をしたいのですがつまづいております。

モーダルウィンドウ呼び出し部分

TodoList
1<b-button variant="outline-info" @click="testOpenModal(todo)">
2  編集						
3</b-button>
4
5<transition name="modal">
6  <show-modal 
7    :id="todoId"
8    :timelimit="todoTimelimit"
9    :content="todoContent"
10    v-if="showContent" 
11    @close="modalClose"
12    @edit="editTodo"
13    v-model="editContent"
14  />
15</transition>
16

script部分
1<script>
2import ShowModal from './ShowModal'
3export default {
4  name: 'todo-list',
5  components: {
6    ShowModal,
7  },
8  data () {
9    return {
10			showModal: false,
11			editUserContent: '',
12			showContent: false,
13			todoItem: '',
14			editContent: '',
15		}
16	},
17	computed: {
18    todos () {
19			return this.$store.state.todos
20		}
21	},
22	methods: {
23		testOpenModal (todo) {
24			this.showContent = true
25			this.todoId = todo.id
26			this.todoTimelimit = todo.timelimit
27			this.todoContent = todo.content
28		},
29		editTodo (id) {
30			this.$store.commit('editTodo', {
31				editContent: this.editContent
32			})
33			this.editContent = ''
34		},
35
36		modalClose () {
37			this.showContent = false
38		}
39	}
40}
41</script>

呼び出される側

ShowModal
1<template>
2<div>
3  <div class="modal-mask">
4    <div class="modal-wrapper" @click.self="$emit('close')">
5      <div class="modal-container">
6
7        <div class="modal-header">
8          {{ id }}:編集
9          {{ timelimit }}
10	        {{ content }}
11        </div>
12
13			  <div class="modal-form">
14				  <b-input-group class="mb-2">
15				  <b-form-input 
16					  type="text" 
17					  placeholder="やりたいことを入力してください"
18						@input="onInput"
19						:value="content"	
20				  >
21					  <!-- @input="$emit('input', $event)" -->
22				  </b-form-input>
23				  <b-form-datepicker 
24					  class="mb-2" 
25					  placeholder="何日までに行いますか？"
26				  >
27				  </b-form-datepicker>
28			  </b-input-group>
29			  </div>
30
31			  <div class="modal-footer">
32				  <button @click="edit(id)">OK</button>
33				  <button @click="$emit('close')">Close</button>
34			  </div>
35		  </div>
36	  </div>
37  </div>
38</div>

<script>
export default {
	name: 'show-modal',
	props: ['id', 'timelimit', 'content']	,
  deta () {
		return {
			closeModal: false,
			text: '',
		}
	},
	methods: {
		edit(id) {
			this.$emit('edit', id)
			this.$emit('close')
		},
		onInput(e) {
			this.$emit('input', e, this.id)
		}
	},
	computed: {
		todos () {
			return this.$store.state.todos
		}
	}
}
</script>

storejs
1export default new Vuex.Store({
2	state: {
3		todos: [
4			{
5				id: 1,
6				content: 'お菓子かう',
7				timelimit: '3月15日',
8				editContent: '',
9			},
10			{
11				id: 2,
12				content: '本を買う',
13				timelimit: '3月15日',
14				editContent: '',
15			}
16		],
17		nextTaskId: 3,
18	},
19	mutations: {
20    addTodo (state, { content, timelimit }) {
21      state.todos.push({
22				id: state.nextTaskId,
23				content,
24				timelimit,
25			})
26			state.nextTaskId++
27		},
28		editTodo (state, { editContent }) {
29			editContent = state.todos.content
30		}
31	}
32})