JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<div id="app">
  <div ref="sortable">
    <div
      v-for="n in items"
      :key="n.id"
      :data-id="n.id"
      class="item"
    >{{ n.val }}</div>
  </div>
  <div>
    <div v-for="n in items">{{ n.val }}</div>
  </div>
</div>

CSS

.item {
  padding: 5px;
  margin: 5px;
  border: 1px solid silver;
  cursor: pointer;
}

JavaScript

new Vue({
  el: '#app',
  data: {
    items: [...Array(10)].map((n, i) => ({
      id: i + 1,
      val: 1 << i,
    })),
  },
  mounted() {
    $(this.$refs.sortable).sortable({
      update: () => {
        this.items = $(this.$refs.sortable)
          .find('.item')
          .get()
          .map(n => this.items.find(m => m.id === +n.dataset.id));
      },
    });
  },
});