Edit in JSFiddle

var vm = new Vue({
    el: "#app",
    data: function(){
      return {
    todos: [
      { text: "Learn JavaScript", done: false, isEditable: false },
      { text: "Learn Vue", done: false, isEditable: false },
      { text: "Play around in JSFiddle", done: true, isEditable: false },
      { text: "Build something awesome", done: true, isEditable: false },
      { text: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxaaaaaaaaaaaaaaaaaaaaaaaaaaaabbbbbbbbbbbbbbbbbbbbbbbbvcvvvvvvvvvvvvvvvvvvvvv------------------------333333333333333333333333333333333333333xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx55555555555555555555555555555", done: true, isEditable: false },
    ]
      }
    },
    methods: {
      keypress: function(e){
        // if(e.key !== 'Enter') return;

        this.todos.push({text: e.target.value, done: false, isEditable:false})
        e.target.value = '';
      },
      remove: function(i){
        console.log(i);
        this.todos.splice(i, 1)
      },
    },
    // autofocus 는 모바일 사파리에서 작동하지 않는다.
    directives: { // 사용자지정 디렉티브: https://kr.vuejs.org/v2/guide/custom-directive.html
      focus: {
        // 디렉티브 정의
        inserted: function (el) {	// 입력상자가 등록되면 포커스를 준다.
          el.focus()
        }
      }
    }
  })

  <div id="app">
    <input type="text" @keypress.enter="keypress" placeholder="somthing..." />

    <div class="todo" 
        @dblclick="todo.isEditable=true"
        v-for="(todo, i) in todos">
      <div v-if="!todo.isEditable" class="grid">
        <button @click="todo.done=!todo.done">&checkmark;</button>
        <span class="text" :class="{done: todo.done}" >{{todo.text}}</span>
        <button class="edit" @click="todo.isEditable=true">&#9998;</button>
        <button class="remove" @click="remove(i)">&times;</button>
      </div>
      <div v-else="">
        <input v-focus 
          type="text" 
          v-model="todo.text" 
          @keypress.enter="todo.isEditable=false"
          @blur="todo.isEditable=false" />
      </div>
    </div>


  </div>

body {
  background: #fff;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

input {
  width: 95%;
  padding: 0.5em;
  font-size: 1em;
  margin: 0.5em auto;
  display: block;
}

button {
  cursor: pointer;
  outline: none;
  max-width: 2em;
  max-height: 1.7em;
  border-radius: 0.5em;
  font-size: 1em;
}

button:hover,
button:focus,
button:active {
  color: #fff;
  background: darkblue;
}

.todo {
  padding: 0.5em;
  margin: 0.5em;
  color: black;
  background: #eee;
  border-radius: 0.2em;
}

.todo:hover {
  background: #ddd;
}

.todo .grid {
  display: grid;
  grid-template-columns: 0.5fr 9fr 0.5fr 0.5fr;
  grid-gap: 0.4em;
 }

.todo .text {
  word-break: break-all;
}

.done {
  color: #ccc;
  text-decoration: line-through;
 }