Sortable Vue.js Items

HTML

<script src="https://rubaxa.github.io/Sortable/Sortable.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.24/vue.min.js"></script>

<div>
    <lessons></lessons>
</div>
 <template id="lessons-template">
    <ul v-el:sortable>
      <li v-for="item in list" id="{{item}}">{{ item }}</li>
    </ul>
    
    {{list | json}}
 </template>

CSS

ul {
  list-style: none;
  padding: 0;
  margin: 30px;
}
ul li {
  padding: 10px;
  display: block;
  background: #EFEFEF;
  border: solid 1px #CCC;
  margin-bottom: 5px;
}

JavaScript

Vue.component('lessons', {
  template: "#lessons-template",

  data: function() {
    return {
      list: ['Item 1', 'Item 2', 'Item 3']
    };
  },

  methods: {
    onChange: function(evt) {
      console.log(this.list); // allways ['Item 1', 'Item 2', 'Item 3']
    }
  },

  ready: function(value) {
    var self = this;
    Sortable.create(this.$els.sortable, {
      draggable: 'li',
      onSort: this.onChange,
      onEnd: function (evt) {
        self.list.splice(evt.oldIndex,1);
        self.list.splice(evt.newIndex,0,evt.item.id);       
    },
    });
  }
});

new Vue({ el: 'body'});