Parameter passing does not work in in Vue.js app

I just want to say i'm pretty new to JavaScript so this might be a dumb question. I was trying to do a short course on Vuex on how to make a simple Todo Manager. I got stuck on a issue: i'm trying to delete a todo from my list of todos and in actions i'm not getting the parameter i want to send (the id of the todo) and it doesn't seem to work.

This is my code:

todos.js

const actions = {
    async deleteTodo({ commit , id}) {
        await axios.delete(`https://jsonplaceholder.typicode.com/todos/${id}`);
        console.log(id)
        commit('removeTodo', id);
    } };

const mutations = {
    removeTodo (state, id) {
        console.log(id)
        state.todos = state.todos.filter(todo => todo.id !== id)
    } }; 

Todos.vue

<template>
  <div>
      <h3>Todos</h3>
      <div class="todos">
        <div v-for="todo in allTodos" v-bind:key="todo.id" class="todo">
              
              <i @click="deleteTodo(todo.id)" class="fas fa-trash-alt"></i>
        </div>
      </div>    
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';

export default {
    name: "Todos",
    methods: {
        ...mapActions('todos', (['fetchTodos', 'deleteTodo']) 
        )
    },
    computed: { 
        ...mapGetters( 'todos',['allTodos'])
    },
    created() {
        this.fetchTodos();
    }
}
</script>

I used the console.log(id) as a debugging method and in the console i've found the id returned is undefined. I've tried a lot of things, but nothing seems to work. I've even hard coded the id @click="deleteTodo("1")"i still get it in the action as undefined.

Hopefully someone can help me as i'm clearly doing something wrong.