더 나은 사용자 경험을 위해 애니메이션을 추가하겠습니다.

1.애니메이션 설정

TodoList.vue

<template>
    <section>
        <transition-group name="list" tag="ul">
            <li v-for="(todoItem,index) in propsdata" :key="todoItem" class="shadow">
                <i class="checkBtn fa fa-check" aria-hidden="true"></i>
                {{todoItem}}
                <span class="removeBtn" type="button" @click="removeTodo(todoItem,index)">
                    <i class="fa fa-trash-o"></i>
                </span>
            </li>
        </transition-group>
    </section>
</template>

ul 태그를 지우고 transition-group 태그로 대체합니다.
trasition-group의 tag 속성에 원래 태그를 선언해줍니다.
name 항목은 추후 클래스를 통해 애니메이션 설정하는데 쓰입니다.

<style>
    ul {padding:0;list-style:none}
    li {display:flex;min-height:50px;height:50px;line-height:50px;margin:0.5rem 0;padding:0 0.9rem;background:#fff;border-radius:5px}
    .checkBtn {line-height:45px;color:#62acde;margin-right:5px}
    .removeBtn {margin-left:auto;color:#de4343}

    .list-item {display:inline-block;margin-right:10px}
    .list-move {transition:transform 1s}
    .list-enter-active, .list-leave-active {transition:all 1s}
    .list-enter, .list-leave-to {opacity:0;transform:translateY(30px)}
</style>

스타일 영역에는 transition 속성으로 애니메이션 효과를 부여합니다.
클래스 이름은 transition-group 영역에서 선언했던 name값을 접두사로 가지고 있습니다.
내용이 추가되거나 삭제됨에 따라 해당 CSS가 적용됩니다.

2.Modal 설정

TodoInput.vue

<template>
    <div class="inputBox shadow">
        <input type="text" v-model="newTodoItem" placeholder="Type what you have to do" v-on:keyup.enter="addTodo">
        <span class="addContainer" v-on:click="addTodo">
            <i class="addBtn fa fa-plus" aria-hidden="true"></i>
        </span>

        <modal v-if="showModal" @close="showModal = false">
            <h3 slot="header">경고</h3>
            <span slot="footer" @click="showModal = false">
                할 일을 입력하세요.
                <i class="closeModalBtn fa fa-times" aria-hidden="true"></i>
            </span>
        </modal>
    </div>
</template>

모달 팝업을 만들고 불리언 데이터 값에 따라 쇼/하이드 처리가 되게 합니다.
또 닫기버튼을 눌렀을때 팝업이 닫히게 처리해 줍니다.

<script>
export default {
    data() {
        return {
            newTodoItem : '',
            showModal : false
        }
    },
    methods : {
        addTodo() {
            if (this.newTodoItem !== "") {
                var value = this.newTodoItem && this.newTodoItem.trim();
                this.$emit('addTodo',value);
                this.clearInput();
            } else {
                this.showModal = !this.showModal;
            }
        },
        clearInput() {
            this.newTodoItem = '';
        }
    }
}
</script>

showModal 값을 선언합니다.
입력된 값이 없을때 노출되도록 합니다.