<filename>Src/Views/Todo.vue.js
const Todo = Vue.component('Todo', {
  data: function () {
    return {
  		title: "Todo",
      new_todo: '',
      todos: [],
      maxlength_: 36
    }
  },
  methods: {
    addTodo() {
      if(this.new_todo != '' ) {
        this.todos.push({ todo: this.new_todo, conclused: false })
        this.new_todo = ''
      }
    },
    deleteTodo(index) {
      this.todos.splice(index, 1)
    },
    completeTodo(index) {
      this.todos[index].conclused = !this.todos[index].conclused
    }
  },
	created(){
		document.title = this.title
    if (localStorage.getItem('TODOS')) this.todos = JSON.parse(localStorage.getItem('TODOS'))
	},
  mounted() {
    feather.replace()
  },
  watch: {
    todos: {
      handler() {
        localStorage.setItem('TODOS', JSON.stringify(this.todos))
      },
      deep: true
    }
  },
  template: `
    <div class="view">
      <h2 class="view-logo">To Do</h2>
      <section class="todos">
        <h3 v-if="todos.length == 0">You not have Todo's!</h3>
        <div class="todo":class="item.conclused?'conclused':''" v-for="(item, index) in todos" :id="index" @click="completeTodo(index)">
          <p class="todo-text">{{item.todo}}</p>
          <button class="todo-delete-button" @click="deleteTodo(index)"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2 icon red"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg></button>
        </div>
      </section>

      <section class="add-todo-content">
        <label class="add-todo">
          <input class="add-todo-input" placeholder="Your task..." v-model="new_todo" @keydown.enter="addTodo()" />
          <button class="add-todo-button" @click="addTodo()"><icon class="add-icon" data-feather="plus"></icon></button>
        </label>
        <!-- <small>{{maxlength_ - new_todo.length}} characters remain</small> -->
      </section>
    </div>
  `
})

export default Todo