vue.dragable.for problems with iframes?

by Admiral Potato

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">
                <div v-for="element in list">{{element.name}}</div>
             </draggable>
         </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;	
}

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'}]
    }
  }
	});