JSFiddle - React, Tailwind, and code Playground

HTML

<script src='https://unpkg.com/vue'></script>
<div id="app">
  <ul class="todo-list">
    <li v-for="(item, index) in items" @dblclick="enableEdit(index)">
    
    <span v-if="! item.edit">{{item.title}}</span>
      
    <input type="text"
      v-model="item.title" 
      v-if="item.edit" 
      ref='search' 
      v-focus 
      v-on:keyup.enter="disableEdit(index)" 
      v-on:blur="disableEdit(index)"
      >
    </li>
  </ul>
  <p class="error" v-if="isError">Este valor ya existe en la lista</p>
</div>

JavaScript

const focus = {
    inserted(el) {
      el.focus()
    },
  }

var todo = new Vue({
  el: '#app',
  data: {
    items: [{
      title: 'HTML5',
      edit: false
    }, {
      title: 'CSS3',
      edit: false
    }, {
      title: 'JavaScript',
      edit: false
    }, ],
    showInput: false,
    isError: false
  },
  directives: { focus },
  methods: {
    enableEdit: function(index) {
      this.items[index].edit = true;
    },
    disableEdit: function(index) {
      this.items[index].edit = false;
    }
  }
});