TodoList.vue에서 삭제 처리를 위한 emit이 작동하지 않습니다.

TodoList.vue에서 removeBtn으로 removeTodo함수를 호출하면서 부모창으로 emit을 요청했지만

app.vue에서 콘솔로그를 출력해봤을때 해당 함수를 호출이 안되는데, 원인이 뭔지를 모르겠습니다.

강의 내용대로 입력했는데, 해당 기능이 수행되지 않고 있습니다.

localhost:8080 으로 접속했을 때 아래와 같은 오류가 뜹니다.

app.vue소스에서 methods 영역에 아래와 같이 선언했는데 못찾는 이유가 무엇인가요?

removeOneItem: function(todoItem){

에러메시지 -

main.js:4 [Vue warn]: Property "removeOneItem" was accessed during render but is not defined on instance.

at <App>

TodoList.vue

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


<script>
export default {
    props:['propsdata'], 

     methods: {
        removeTodo : function(todoItem, index){
            this.$emit('removeItem', todoItem, index);
        },
        toggleComplete: function(todoItem, index){
            console.log(todoItem.item + " " + index);
            todoItem.completed = !todoItem.completed;
            localStorage.removeItem(todoItem.item);
            localStorage.setItem(todoItem, JSON.stringify(todoItem));


        }
    }

}
</script>

app.vue

<template>
  <div ip="app">
    <TodoHeader></TodoHeader>
    <TodoInput v-on:addTodoItem="addOneItem"></TodoInput>
    <!-- <TodoInput v-on:하위 컴포넌트에서 발생시킨 이벤트 이름="현재 컴포넌트 매소드명"></TodoInput> -->
    <TodoList v-bind:propsdata="todoItems" v-on:removeItem="removeOneItem"></TodoList>
    <!-- <TodoList v-bind:propsdata="todoItems"></TodoList> -->
    <!-- <TodoList v-bind:내려보낼 프롭스 속성 이름="현재 위치의 컴포넌트 데이터 속성"></TodoList> -->
    <TodoFooter></TodoFooter>
  </div>
</template>

<script>
import TodoHeader from './components/TodoHeader.vue'
import TodoInput from './components/TodoInput.vue'
import TodoList from './components/TodoList.vue'
import TodoFooter from './components/TodoFooter.vue'

export default {
  data: function(){
    return {
      todoItems:[]
    }
  },
  methods:{
    addOneItem: function(todoItem){

      console.log("addOneItem:[" + todoItem + "]");

      var obj = { completed : false, item: todoItem };
      // console.log(this.newTodoItem);
      //저장하는 로직
      localStorage.setItem(todoItem,JSON.stringify(obj));
      this.todoItems.push(obj);
    }
  },
  removeOneItem: function(todoItem){

    // console.log("removeOneItem app remove items:[" + index + "]:" + todoItem.item);
    console.log("removeOneItem app remove items:[:" + todoItem.item);
    localStorage.removeItem(todoItem.item);
    // this.todoItems.splice(index, 1);

  },