Rename to recommended pattern, no single-name

src/components/ListView/Todo.vue → src/components/ListView/TodoItem.vue

@@ -2,7 +2,6 @@
   <div class="ui fluid card" :class="{ 'green' :todo.done }">
     <!-- yoda, ternary: :class="todo.done ? 'green' : 'red'"  -->
 
-
     <!--View Mode-->
     <div class="content" v-show="!isEditing">
       <div class="header">

src/components/ListView/TodoCreate.vue → src/components/ListView/TodoItemAdd.vue

@@ -78,7 +78,7 @@
 
     // no arrow functions! needs this context to vue instance
     created: function () {
-      console.log('TodoCreate.vue component was created')
+      console.log('TodoItemAdd.vue component was created')
     },
   }
 </script>

src/components/ListView/_ListView.vue

@@ -17,20 +17,20 @@
     </div>
 
     <!-- v-for over array with key, v-bind todo -->
-    <todo v-for="(todo, index) in todos" :key="index"
+    <todo-item v-for="(todo, index) in todos" :key="index"
           @delete-todo="deleteTodo"
           @complete-todo="completeTodo"
-          :todo.sync="todo" />
+          :todo="todo" />
 
     <!-- v-on emitted events -->
-    <create-todo @create-todo="createTodo"></create-todo>
+    <todo-item-add @create-todo="createTodo"></todo-item-add>
   </div>
 </template>
 
 <script type="text/javascript">
   import sweetalert from 'sweetalert'
-  import Todo from './Todo.vue'
-  import CreateTodo from './TodoCreate.vue'
+  import TodoItem from './TodoItem.vue'
+  import TodoItemAdd from './TodoItemAdd.vue'
   import { mapState, mapMutations } from 'vuex'
 
   // Todo: use absolute path src/ as root https://github.com/parcel-bundler/parcel/pull/850
@@ -39,11 +39,21 @@
   export default {
     name: 'ListView',
     components: {
-      Todo,
-      CreateTodo,
+      TodoItem,
+      TodoItemAdd,
       TheHeader,
     },
 
+    props: {
+      status: {
+        type: String,
+        required: true,
+        validator: function (value) {
+          return ['syncing', 'error'].indexOf(value) !== -1
+        },
+      },
+    },
+
     /** Moved to store.js -> computed **/
     // data() {
     //   return {