How to sort a property (value of array) of object?

[justlester]

Hi I have a problem when using vuedraggable. I have an array of objects which in each object has a property that is an array. In the code below, I wanted to sort category.article but it won't change/update. Is there a way to make this work?

Actual Code

<template>
      <div>
            <template v-for="(category,mainIndex) in articleList">
                  <draggable
                       :key="mainIndex"
                       v-model="category.articles"                 
                       :animation="150"
                       handle=".sort-item-handle"
                       ghost-class="sort-item-ghost"
                       class="sort-item-group">
                      <div class="sort-item" v-for="(item,index) in category.articles" :key="index">
                           {{ item.title }}
                      </div>     
                 </draggable>
            </template>
      </div>
</template>

<script>
import draggable from 'vuedraggable'

export default {
      components: {draggable },
      data(){
            return {
                  articleList: [{
                         category: 'test 1',
                         articles: [{id:1,title:'lorem'},{id:2,title:'ipsum'},{id:3,title:'brown fox'}]
                  },{
                         category: 'test 2',
                         articles: [{id:4,title:'lorem'},{id:5,title:'ipsum'},{id:6,title:'brown fox'}]
                  }]
            }
      }
}
</script>

[VictorPulzz]

@justlester I think v-model can't update nested object, you need just use @change method, and update object using this.$set(...