list가 안보여요...

<App.vue>

<template>
  <div id="app">
    <TodoHeader></TodoHeader>
    <Todoinput v-on:addTodoItem="addOneItem"></Todoinput>
    <TodoList v-bind:propsdata="todoItems" v-on:removeItem="removeOneItem"></TodoList>
    <TodoFooter></TodoFooter>
  </div>
</template>

<script>
import TodoHeader from "./components/TodoHeader.vue";
import TodoFooter from "./components/TodoFooter.vue";
import Todoinput from "./components/Todoinput.vue";
import TodoList from "./components/TodoList.vue";

export default {
  data: function() {
    return {
      todoItems: []
    };
  },
  methods: {
    addOneItem: function() {
      var obj = { completed: false, item: this.todoItem };
      localStorage.setItem(this.todoItem, JSON.stringify(obj));
      this.todoItems.push(obj);
    },
    removeOneItem: function(todoItem, index) {
      localStorage.removeItem(todoItem.item);
      this.todoItems.splice(index, 1);
    }
  },  
  created: function() {
    if (localStorage.length > 0) {
      for (var i = 0; i < localStorage.length; i++) {
        if (localStorage.key(i) !== "loglevel:webpack-dev-server") {
          this.todoItems.push(
            JSON.parse(localStorage.getItem(localStorage.key(i)))
          );
        }
        // this.todoItems.push(
        //   JSON.parse(localStorage.getItem(localStorage.key(i)))
        // );
      }
    }
  },
  components: {
    TodoHeader: TodoHeader,
    TodoFooter: TodoFooter,
    TodoList: TodoList,
    Todoinput: Todoinput
  }
};
</script>

<style>
body {
  text-align: center;
  background-color: #f6f6f6;
}
input {
  border-style: groove;
  width: 200px;
}
button {
  border-style: groove;
}
.shadow {
  box-shadow: 5px 10px 10px rgba(0, 0, 0, 0.03);
}
</style>

<TodoList.vue>

<template>
  <div>
    <ul>
      <li v-for="(todoItem, index) in propsdata" v-bind:key="todoItem.item" class="shadow">
        <button
          class="checkBtn"
          v-bind:class="{checkBtnCompleted: todoItem.completed}"
          v-on:click="toggleComplete(todoItem)"
        >V</button>
        <span v-bind:class="{textCompleted: todoItem.completed}">{{ todoItem.item }}</span>

        <!-- <span class="removeBtn" v-on:click="removeBtn(todoItem, index)">
                <i class="fas fa-trash-alt"></i> 
        </span>-->
        <button class="removeBtn" v-on:click="removeTodo(todoItem, index)">delete</button>
      </li>
    </ul>
  </div>
</template>

<script scoped>
export default {
  props: ["propsdata"],
  methods: {
    removeTodo: function(todoItem, index) {
      this.$emit("removeItem", todoItem, index);
    },
    toggleComplete: function(todoItem) {
      todoItem.completed = !todoItem.completed;
      localStorage.removeItem(todoItem.item);
      localStorage.setItem(todoItem.item, JSON.stringify(todoItem));
    }
  }
};
</script>

<style>
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 {
  text-decoration: line-through;
  color: #b3adad;
}
.textCompleted {
  text-decoration: line-through;
  color: #b3adad;
}
</style>

똑같이 따라했고, 다른 분 질문 내용도 확인하고 인덴트도 다 없앴는데도 계속 리스트가 안나오네요.... 삭제도 되고 추가도 되는데 리스트 내용만 안나와서 너무 답답해요...

에러가 안뜨니 어디가 어떻게 잘못된건지도 잘 모르겠습니다....

인프런 커뮤니티 질문&답변