Soy nuevo en Vue.js y para este proyecto, estoy usando Vuedraggable para arrastrar elementos. Actualmente, los elementos dentro del div draggabble se muestran como

 Text 1 Text 2 Text 3 Text 4

¿Hay alguna manera de que podamos cambiar eso y mostrarlo como

 Text 1 Text 2 Text 3 Text 4

Enlace JsFiddle = https://jsfiddle.net/ujjumaki/y1xw95rc/41/

Vista

 <div id="app"> <div> <draggable id="first" data-source="juju" :list="todos" class="list-group" draggable=".item"> <div class="list-group-item item" v-for="(element, index) in todos" :key="index" style="border-style: outset; margin-top:0.5%; width: 10%; border-color:#17a2b8; border-width:thin;"> <p> {{element.text}} id {{element.id}} </p> </div> </draggable> </div> </div> <script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script> <script src="//cdn.jsdelivr.net/npm/sortablejs@1.8.4/Sortable.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.20.0/vuedraggable.umd.min.js"></script>

Método

 new Vue({ el: "#app", data: { todos: [ { text: "Text 1", id: "1" }, { text: "Text 2", id: "2" }, { text: "Text 3", id: "3"}, { text: "Text 4", id: "4" } ] }, methods: { toggle: function(todo){ todo.done = !todo.done } } })