vue.dragable.for

HTML

<script src="https://cdn.jsdelivr.net/sortable/1.4.2/Sortable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.13.1/lodash.min.js"></script>
<script src="https://cdn.rawgit.com/David-Desmaisons/Vue.Draggable/master/dist/vuedraggable.min.js"></script>
     <div id="main">
        <h1>Vue Dragable For</h1>
       
        <div class="drag">
            <h2>Draggable</h2>
            <draggable :list="list" class="dragArea" :options="{draggable:'.dragg-me'}">
                <div class="draggable" v-for="element in list">
                  <div class="dragg-me">dragg me</div>
                  <div class="element">
                    {{element.name}}
                  </div>
                </div>
             </draggable>
         </div>

        <div class="normal">
            <h2>Normal v-for</h2>
            <div class="dragArea">
                <div v-for="element in list">{{element.name}}</div>
             </div>
         </div>

        <button @click="add">Add</button>
        <button @click="replace">Replace</button>
    </div>

CSS

.normal {
    background-color: grey;
}
.drag {
    background-color: green;
}
.dragArea{
     min-height: 10px;	
}

.draggable{
  cursor: pointer;
}

.dragg-me{
  padding: 5px;
  border: 1px solid blue;
}

.element{
  padding: 10px;
}

JavaScript

var vm = new Vue({
	el: "#main",
	data: {
		list:[{name:"John"}, 
				{name:"Joao"}, 
				{name:"Jean"} ]
		},
	methods:{
			add: function(){
				this.list.push({name:'Juan'});
			},
			replace: function(){
				this.list=[{name:'Edgard'}]
			}
		}
	});