Vue 3 : Event, emit and props

I have a problem with event, emit and props (and probably some logic too)

I have a component A in which I have a loop with a component B. In this loop, I have a method to open the modal (which is a component C) but this method is not part of component B.

Like this :

    <a>
    <!-- MODAL-->
    <div v-if="showModal">
         <modal-cat @cat="catId = getCatId($event)" @addTx="addTx($event)"></modal-cat>
    </div>

    <div v-if="transactions.length != 0" class="mx-auto">
        <div v-for="tx in transactions" :key="tx">
            <div class="mb-2 border border-gray-600 rounded-lg bg-white pt-2 pb-4">
                <div class="flex justify-end">
                    <span
                        class="inline-flex items-center justify-center h-6 w-6 rounded-full text-lg bg-blue-800 text-white"
                        @click="showModal = true, txToAdd = tx">
                        <i class='bx bx-plus'></i>
                    </span>
                </div>
                <transaction-data :transaction="tx" :address="walletAddress"></transaction-data>
            </div>

        </div>
    </div>
   </a>

In this modal, I fetch some data (in fact, a array of categories) that I also display in a loop. Like this :

<div class="modal-container">
    <div v-for="(categorie) in categories" :key="categorie">
        <p @click="$emit('cat', categorie.id)">{{ categorie.name}}</p>
    </div>

    <div class="modal-footer">
       <slot name="footer">
          <button class="modal-default-button" @click="$emit('addTx', 'ok')">
               OK
          </button>
       </slot>
     </div>
  </div>

I need some data from my modal in my component A but I also need some data from my component B in my component A (to add a transactions to a category)

I managed to get the data I wanted like this (And I can get it):

const showModal = ref(false);
const txToAdd = ref({});
const catId = ref(0);

function getCatId(event) {
   return event
}

const addTx = (value) => {
   if (value === "ok") {
      //console.log(txToAdd.value); <= the value are well displayed in the console.
      let data = {
         tx: txToAdd.value,
         catId: catId.value
       }
       store.dispatch("categories/addTxToCategories", data);
    }
 }

But in my store, when I try to get the payload, I can't access to the data and I only get the payload object.

Is there something wrong with my logic ? What am I doing wrong ?

EDIT

I just need to wrap the result in spread operator, like this :

const addTx = (value) => {
  if (value === "ok") {
  //console.log(txToAdd.value); 
  let data = {
     tx: {...txToAdd },
     catId: catId.value
   }
   store.dispatch("categories/addTxToCategories", {...data });
  }
}

And in my store, the payload MUST be the second argument :

async addTxToCategories({ commit }, payload) {}