vue.js - Vuejs computed properties and jquery ui sortable issue -

in project have component 3 ul lists. have kind of data array items, each item has properties. aim to:

1. distribute items in basic array 3 lists
2. make possible drag&drop items between lists , accordingly update items data, since each item has property tells list item belongs

instead of copy-pasting lot of code, tried reproduce incorrect behaviour in jsfiddle using simple example here:

https://jsfiddle.net/89pl26d2/4/

the thing is, when drag&drop, got 2 items dragged, instead of one.

however, when switched computed properties watch, got desired behaviour , worked fine.

i figure out line causes error: line when update item property telling me list item should belong after drag finished. can't figure out why causes this

i know it's not best way work html directly, i'm okay now.

generally, whenever see issue in vue, related lists, wrong item updated or that, comes down vue trying smart getting wrong because doesn't have best information. solved using key.

it recommended provide key v-for whenever possible, unless iterated dom content simple, or intentionally relying on default behavior performance gains.

key.

<div id="app">   <div>     <ul id="lista" data-list="a" class="connectedsortable">       <li v-for="item in listafiltered" :key="item.id" :data-id="item.id">{{ item.title }}</li>     </ul>      <ul id="listb" data-list="b" class="connectedsortable">       <li v-for="item in listbfiltered" :key="item.id" :data-id="item.id">{{ item.title }}</li>     </ul>   </div> </div> 

adding key fixes issue.