Vue.js Sortable list - updating model and saving position on change through AJAX

Markup:

<div id="task-row" v-sortable.ul="tasks">
    <div v-for="task in tasks" track-by="$index">
        <div>{{ $index + 1 }}</div>
        <input class="hidden" v-model="task.position" value="{{ $index + 1 }}">
        <div>{{ task.description }}</div>
    </div>
</div>

Objective:

When a re-order takes place(through Sortable), send a AJAX Request to backend to save the new positions of the tasks

Whats v-sortable?

http://ift.tt/1PZqWGL

Problem

• The markup is updated but the model is not updated. In this case the value of task.position remains the same when a re-order takes place.
• How should the $watch look like for this(if needed)? What values should I put in?

How to solve this?

via Chebli Mohamed