Added drag and drop

src/App.vue

@@ -0,0 +1,64 @@
+<template>
+  <div id="app">
+    <Header />
+    <AddTodo v-on:add-todo="addTodo"/>
+    <Todos v-bind:todos="todos" v-on:del-todo="deleteTodo" />
+  </div>
+</template>
+
+<script>
+import uuid from 'uuid'
+
+import Header from "./components/layout/Header";
+import Todos from "./components/Todos";
+import AddTodo from "./components/AddTodo";
+
+export default {
+  name: 'app',
+  components: {
+    Header,
+    Todos,
+    AddTodo
+  },
+  data() {
+    return {
+      todos: [
+        {
+          id: uuid.v4(),
+          name: "Что-то, что я собираюсь сделать",
+          completed: false
+        },
+        {
+          id: uuid.v4(),
+          name: "Что-то, что я уже сделал",
+          completed: true
+        }
+      ]
+    }
+  },
+  methods: {
+    deleteTodo(id) {
+      this.todos = this.todos.filter(todo => todo.id !== id);
+    },
+    addTodo(n) {
+      (n !== '' & n !== ' ') && this.todos.push({
+        id: uuid.v4(),
+        name: n,
+        completed: false
+      })
+    }
+  }
+}
+</script>
+
+<style>
+@import url('https://fonts.googleapis.com/css?family=Oswald&display=swap');
+#app {
+  font-family: 'Oswald', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: ;
+  margin-top: 50px;
+}
+</style>

src/components/AddTodo.vue

@@ -0,0 +1,53 @@
+<template>
+  <div>
+    <form autocomplete="off" @submit.prevent="$emit('add-todo', inputName); inputName = '';" class="addTodo">
+      <input type="text" v-model="inputName" name="title" placeholder="Название дела..." class="txtField">
+      <input type="submit" value="Добавить" class="btn">
+    </form>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "AddTodo",
+    data() {
+      return {
+        inputName: ''
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .addTodo {
+    width: 400px;
+    height: 30px;
+    margin: auto;
+    text-align: left;
+  }
+
+  .txtField {
+    font-family: 'Oswald', sans-serif;
+    width: 300px;
+    float: left;
+    border-width: 0px;
+    border-bottom-width: 1px;
+    height: 30px;
+    font-size: 16px;
+    box-sizing: border-box;
+    -moz-box-sizing: border-box;
+  }
+
+  .btn {
+    font-family: 'Oswald', sans-serif;
+    float: right;
+    font-size: 16px;
+    border: 0ch;
+    height: 30px;
+    width: 90px;
+    background: black;
+    color: white;
+    box-sizing: border-box;
+    -moz-box-sizing: border-box;
+  }
+</style>

src/components/TodoItem.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="todo-item" v-bind:class='{"is-complete":todo.completed}' v-on:click="markComplete">
+    <p>
+      {{todo.name}}
+      <button @click="$emit('del-todo', todo.id)" class="delete">&#10060;</button>
+    </p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "TodoItem",
+  props: ["todo"],
+  methods: {
+    markComplete() {
+      this.todo.completed = !this.todo.completed
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .todo-item {
+    margin: auto;
+    text-align: left;
+    width: 400px;
+    cursor: pointer;
+    font-weight: Regular;
+  }
+
+  .is-complete {
+    text-decoration: line-through;
+  }
+
+  .delete {
+    float: right;
+    border: none;
+    background-color: Transparent;
+    cursor: pointer;
+  }
+</style>

src/components/Todos.vue

@@ -0,0 +1,31 @@
+<template>
+  <draggable v-model="todos" group="people" @start="drag=true" @end="drag=false">
+    <div v-bind:key="todo.id" v-for="todo in todos">
+      <TodoItem v-bind:todo="todo" v-on:del-todo="$emit('del-todo', todo.id)" />
+    </div>
+  </draggable>
+</template>
+
+<script>
+import draggable from 'vuedraggable'
+import TodoItem from "./TodoItem.vue";
+
+export default {
+  name: "Todos",
+  components: {
+    draggable,
+    TodoItem
+  },
+  props: ["todos"],
+  methods: {
+    moveItem(from, to) {
+      this.todos.splice(to, 0, this.todos[from]);
+      this.todos[from] = null;
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/layout/Header.vue

@@ -0,0 +1,15 @@
+<template>
+  <header class="header">
+    <h1>Мои Дела &#128221;</h1>
+  </header>
+</template>
+
+<script>
+  export default {
+    name: "Header"
+  }
+</script>
+
+<style scoped>
+
+</style>

src/main.js

@@ -0,0 +1,8 @@
+import Vue from 'vue'
+import App from './App.vue'
+
+Vue.config.productionTip = false
+
+new Vue({
+  render: h => h(App),
+}).$mount('#app')