리스트 제거 전 경고창이 나오도록 만들어 보았는데요

삭제 버튼을 누를 시 모달창이 뜨면서 해당 리스트가 'toDelete'에 저장되고, 
모달창에서 '진행하기' 버튼을 누르면 'toDelete'에 저장된 리스트를 지우는 방식으로 해결하였습니다.
일단 지금 코드만으로도 원하는 대로 작동도 잘 되긴 하는데, 

모달창과 트렌지션 그룹이 각기 분리되어 있어,
트랜지션 그룹 내부 li에 선언된 반복문 index와
해당 인덱스가 지닌 값 addedItem 을
직접 모달창에서 받을 수 있도록 전달하는 방법을 몰라서
이렇게 했는데, 혹시 방법이 있을까요?

만약 전달이 가능하다면
toDelete라는 객체를 굳이 선언할 필요가 없고 코드가 더 깔끔해지지 않을까 싶네요. 

아니면, 더 깔끔한 방법은 없을지? 

몇 차례의 시도 중에 li 안에 모달창을 선언하는 것도 해봤는데,
그렇게 하니까 모달창이 storedItem의 개수만큼 늘어나는데다 작동이 안되네요. 

아래는 코드입니다.  

<template>

  <div>

    <transition-group name="list" tag="ul">

      <li v-for="(addedItem, index) in this.storedItems" v-bind:key="addedItem.item">

        <span v-on:click="toggleComplete({addedItem, index})" v-bind:class="{checkCompleted: addedItem.completed}">완료</span>

        <span v-bind:class="{textCompleted: addedItem.completed}">{{addedItem.item}}</span>

        <span class="remove" v-on:click="showDeleteInfo(addedItem, index)">삭제</span>    

      </li>

    </transition-group>

    <DeleteModal v-if="showModal2" @close="showModal2 = false">

      <h3 slot="header">

        경고!

        <i class="closeModalBtn fas fa-times" @click="showModal2 = false, cancelDeletion()"></i>

      </h3>

      <p slot="body">

        {{toDelete.value.item}}의 삭제를 진행하시겠습니까?<br>

        이 작업은 되돌릴 수 없습니다. 

      </p>

      <button slot="deleteInfo" v-on:click="removeItemByModal()" @click="showModal2 = false">

        진행하기

      </button>

    </DeleteModal><!--리스트 삭제 경고 모달창-->

  </div>

</template>

<script>

import { mapGetters, mapMutations } from 'vuex'

import DeleteModal from './common/Modal.vue' // 트랜지션 모달 임포트

export default {

  data(){

    return{

      toDelete:{

        value:'',

        indexOfValue:''

      }, // 삭제 버튼을 누른 리스트의 정보를 담는 곳

      showModal2: false,

    }

  },

  methods:{

    showDeleteInfo(addedItem, index){

      this.toDelete.indexOfValue = index; // 삭제 버튼을 누른 리스트의 인덱스

      this.toDelete.value = JSON.parse(sessionStorage.getItem(addedItem.item)); 

      // 삭제 버튼을 누른 리스트가 가진 정보

      this.showModal2 = !this.showModal2; // 모달창 토글

      console.log(this.toDelete);

    },

    cancelDeletion(){ // 취소 시 저장된 정보 제거

      this.toDelete.indexOfValue = '';

      this.toDelete.value = '';

      console.log(this.toDelete);

    },

    ...mapMutations({

      removeItems: 'removeOneItem',

      toggleComplete: 'toggleOneItem' 

    }),

    removeItemByModal(){

      sessionStorage.removeItem(this.toDelete.value.item);

      this.storedItems.splice(this.toDelete.indexOfValue, 1) 

      // 삭제 대기로 저장된 리스트 제거 

    },

  },

  computed:{

    ...mapGetters(['storedItems'])

  },

  components:{

    DeleteModal

  }

}

</script>