JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.js"></script>
<div id="app">
  <div>
    <ul id="listA" data-list="A" class="connectedSortable">
      <li v-for="item in listAFiltered" :data-id="item.id">{{ item.title }}</li>
    </ul>

    <ul id="listB" data-list="B" class="connectedSortable">
      <li v-for="item in listBFiltered" :data-id="item.id">{{ item.title }}</li>
    </ul>
  </div>
</div>

JavaScript

new Vue({
  el: '#app',
  data: {
  	items: [
    	{
        id: 1,
      	title: '1',
        list: 'A'
      },
      {
        id: 2,      
      	title: '2',
        list: 'A'
      },
      {
        id: 3,      
      	title: '3',
        list: 'A'
      },
      {
        id: 4,      
      	title: '4',
        list: 'B'
      },
      {
        id: 5,      
      	title: '5',
        list: 'B',
      },
      {
        id: 6,      
      	title: '6',
        list: 'B'
      },
    ]
  },
  
  mounted() {
    this.$nextTick(() => {
      $("#listA, #listB").sortable({
        connectWith: ".connectedSortable",
        tolerance: 'pointer',
        receive: (event, ui) => {
          let list = $(ui.item).parents('ul').data('list'),
              id   = $(ui.item).data('id')

          let item = this.items.filter((item) => {
            return item.id === id
          })[0]

          // Causes double drag&drop
          item.list = list
        }
      }).disableSelection();
    })
  },
  
  computed: {
  	listAFiltered() {
    	return this.items.filter((item) => {
        return item.list === 'A'
      })
    },
    
    listBFiltered() {
    	return this.items.filter((item) => {
        return item.list === 'B'
      })
    }
  }
})