Edit in JSFiddle

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

External resources loaded into this fiddle:

<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" class="pointer">{{element.name}}</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>
.normal {
    background-color: grey;
  }

  .drag {
    background-color: green;
  }

  .pointer{
    cursor: pointer;
  }

  .dragArea {
    min-height: 10px;
  }