title: VueJS dom doesn't refresh when array changed
body: <p>I have a custom directive called "sortable" but I ran into a problem with the DOM. The problem is when I dragged and dropped an item the array is changed but the DOM isn't.</p>
  
  <p><strong>This is my custom directive:</strong></p>
  
  <pre><code> Vue.directive('sortable', {
      bind: function(el, binding, vnode) {
          // Initialize sortable
          this.sortable = Sortable.create(el, {});
          console.debug("Sortable initialized");
  
          this.sortable.option("onUpdate", function(event) {
              binding.value.move(event.oldIndex, event.newIndex);
              var updated = binding.value;
              Vue.set(tasks, updated);
          });
      }
  });
  </code></pre>
  
  <p><strong>And this is how I create my Vue instance:</strong></p>
  
  <pre><code>app = new Vue({
      el: "#app",
      data: {
          subtotal: 0,
          tasks: [
              {name: '', quantity: '', rate: 80, costs: ''}
          ]
      },
      methods: {
          newTask: function() {
              this.tasks.push({name: '', quantity: '', rate: 80, costs: ''})
          },
          deleteTask: function(index) {
              this.tasks.splice(index, 1);
              this.calculateTotal();
          },
          calculateCosts: function(event, value, index) {
              this.tasks[index].costs = event.target.value * value;
              this.calculateTotal();
          },
          calculateTotal: function() {
              this.subtotal = 0;
              _.forEach(this.tasks, $.proxy(function(task) {
                  this.subtotal += task.costs;
              }, this));
          }
      }
  });
  </code></pre>
  
  <p>In my template I use: <code>v-for="(task, index) in tasks"</code>. Did I something wrong?</p>