JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.17/vue.js "></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.6.8/dragula.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.6.8/dragula.js"></script>
<body>
  <div id="app">
    <div id="draggable" class="wrapper">
      <template v-for="(index, item) in list">
        <block :id="index" :index="index" :item="item" :name="item.name">
        </block>
      </template>
    </div>
    <div class="footer">
      <pre>{{ $data | json }}</pre>
    </div>
  </div>
</body>

<template id="block-template">
  <div :id="index" :class="[name, 'block']">
    <div class="text name">{{ name }}</div>
    <div>Index: {{ index }}</div>
    <span class="delete" v-on:click="removeItem(item)">&#x2717;</span>
  </div>
</template>

CSS

html, body, #app {
  height: 100%;
}

.wrapper {
    display: flex;
    height: 50%;
}

.block {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100%;
    flex: 1 0 120px;
    border: 1px solid grey;
    z-index: 1;
}

.delete {
    transition: all .3s ease;
    z-index: 15;
    cursor: pointer;
}

.footer {
  width: 100%;
}

JavaScript

Vue.component('block', {
    template: '#block-template',  

    props: ['index', 'name', 'item'],

    methods: {
        removeItem: function (item) {
           vm.list.$remove(item);
        }
    }
});

var vm = new Vue({
    el: '#app',

		data: {
    	list: [
      	{name: 'item1'},
        {name: 'item2'},
        {name: 'item3'},
        {name: 'item4'},
        {name: 'item5'}
      ]
    },

    methods: {
        reorder: function (element, sibling) {
            var children = element.parentNode.querySelectorAll(".block");

            var length = this.list.length;

            var ids = [];

            for (var i = 0; i < length; i++) {
                if (children[i].id) {
                    ids.push(children[i].id);
                }

                children[i].id = i;
            }

            var vm = this;

            var newArr = ids.map(function (id) {
                return vm.list[id];
            });
            
            this.list = newArr;
        }
    }
});

dragula([document.getElementById('draggable')]).on('drop', function (el, target, source, sibling) {
    vm.reorder(el, sibling);
});