Всплывающий элемент при наведении

У вас есть только один флаг для delete, и все кнопки удаления связаны с ним.

Вы можете сделать что-то вроде этого

<ul>
 <li v-for = "(list,index) in lists" v-bind:key = "index" @mouseover = "list.deleteNote=index;" @mouseleave = "list.deleteNote = -1">{{list.fruit}}
  <p v-if = "list.deleteNote === index">{{list.note}}</p>
 </li>
</ul>

При наведении курсора вы устанавливаете deleteNote текущий индекс, а при наведении курсора вы устанавливаете недопустимый индекс (в данном случае -1). Кнопка удаления теперь привязана к текущему индексу.

Я не думаю, что codeandbox здесь, в StackOverflow, поддерживает vue.js, поэтому я немного подправил JS в следующей скрипке. Во-первых, весь список необходимо обернуть как переменную в соответствии с Документация по рендерингу списка Vue.

Посмотрите, как я возился с вашим кодом, и я думаю, что желаемый результат здесь: https://jsfiddle.net/gve4s87L/

Ваш код не является неправильным на самом деле. Изменение deleteNote элементов, чтобы наблюдать, работает ли он более тщательно. Следующим образом отображается только примечание зависшего элемента:

new Vue({
  el: '#app',
  data: {
    lists: [{
        fruit: "Apple",
        note: "aa",
        deleteNote: false
      },
      {
        fruit: "Pear",
        note: "pp",
        deleteNote: false
      },
      {
        fruit: "Eggs",
        note: "gg",
        deleteNote: false
      }
    ]
  }
});

<script src = "https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id = "app">
  <ul>
    <li v-for = "(list,index) in lists" v-bind:key = "index" @mouseover = "list.deleteNote=true;" @mouseleave = "list.deleteNote =false">{{list.fruit}}
      <p v-if = "list.deleteNote">{{list.note}}</p>
    </li>
  </ul>
</div>