i 태그 사용 시 click event 안먹는 이유

안녕하세요. 강의 들으면서 하나하나 따라했는데 i태그 사용하여 v-on:click 시, 클릭이벤트가 전혀 먹히지 않아 일단 span태그로 감싸 사용했습니다.

강사님은 i태그만 사용해도 이벤트가 적용 되는데 왜 안되는지 이유를 알 수 있을까요?

제 코드는 아래에 있습니다.

<template>
    <div>
        <ul>
            <li
                v-for="(todoItem, index) in todoItems"
                v-bind:key="todoItem.item"
                class="shadow"
            >
                <span v-on:click="toggleComplete(todoItem, index)">
                    <i
                        class="checkBtn fas fa-check"
                        v-bind:class="{ checkBtnCompleted: todoItem.completed }"
                    ></i>
                </span>

                <span v-bind:class="{ textCompleted: todoItem.completed }">
                    {{ todoItem.item }}
                </span>
                <span
                    class="removeBtn"
                    v-on:click="removeTodo(todoItem, index)"
                >
                    <i class="fa-regular fa-trash-can"></i>
                </span>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    data: function () {
        return {
            todoItems: [],
        };
    },

    methods: {
        removeTodo: function (todoItem, index) {
            localStorage.removeItem(todoItem);
            this.todoItems.splice(index, 1);
        },
        toggleComplete: function (todoItem, index) {
            todoItem.completed = !todoItem.completed;
            localStorage.removeItem(todoItem.item);
            localStorage.setItem(todoItem.item, JSON.stringify(todoItem));
        },
    },

    created: function () {
        if (localStorage.length > 0) {
            for (let i = 0; i < localStorage.length; i++) {
                localStorage.getItem(localStorage.key(i));
                this.todoItems.push(
                    JSON.parse(localStorage.getItem(localStorage.key(i)))
                );
            }
        }
    },
};
</script>

<style scoped>
ul {
    list-style-type: none;
    padding-left: 0px;
    margin-top: 0;
    text-align: left;
}

li {
    display: flex;
    min-height: 50px;
    height: 50px;
    line-height: 50px;
    margin: 0.5rem 0;
    padding: 0 0.9rem;
    background: white;
    border-radius: 5px;
}

.removeBtn {
    margin-left: auto;
    color: #de4343;
}

.checkBtn {
    line-height: 45px;
    color: #62acde;
    margin-right: 5px;
}

.checkBtnCompleted {
    color: #b3adad;
}

.textCompleted {
    text-decoration: line-through;
    color: #b3adad;
}
</style>