Update the vue component on onAdd about vue.draggable HOT 13 CLOSED

<h3>Group fields templates</h3>
<ul class="list-group" id="availableGroups">
    <draggable @add="onAdd" @sort="onSort" @update="onUpdate" :clone="cloneGroup" :list="groups" :options="{animation: 150, sort: false, group: {name: 'fields', pull: 'clone', put: false}}">
        <available-groups v-for="group in groups" :group="group"></available-groups>
    </draggable>
</ul>

<div class="panel-body">
    <draggable class="list-group field-list" :id="'field-list-' + page.id" :data-page_id="page.id" element="ul" @add="onAdd" @sort="onSort" @update="onUpdate" :list="page.fields" :options="{animation: 150, draggable: '.draggable',group: {name: 'fields',pull: 'clone'}}">
        <ha-field v-for="field in page.fields" :page_id="page.id" v-bind:field="field" v-on:delete-field="deleteField(field)" v-on:delete-group-field="deleteGroupField(field, [group, field])" v-on:delete-group="deleteGroup(field)"></ha-field>
    </draggable>
</div>

<li class="list-group-item draggable ignore-elements"  :id="'field-' + field.id">
    <span v-if="field.is_group"><strong>Group: </strong></span>
    <span v-else="field.is_group"><strong>Field: </strong></span>
    <span class="field-name">@{{field.name}}
        <a v-if='field.is_group' :href="'#field-group-list-' + field.id" role="button" data-toggle="collapse" class="btn btn-xs btn-links">
            <i class="fa fa-plus"></i></a>
    </span>
    <p class="pull-right">
        <a v-if='!field.is_group' href="#" class="btn btn-xs btn-primary edit-field" :data-field_id="field.id" @click.prevent="editField"><i class="glyphicon glyphicon-pencil"></i></a>
        <a v-if='field.is_group' href="#" class="btn btn-xs btn-warning delete-field" :data-field_id="field.id" @click.prevent="$emit('delete-group')"><i class="glyphicon glyphicon-trash"></i></a>
        <a v-else='field.is_group' href="#" class="btn btn-xs btn-warning delete-field" :data-field_id="field.id" @click.prevent="$emit('delete-field')"><i class="glyphicon glyphicon-trash"></i></a>
    </p>
    <ul v-if='field.is_group' class="list-group grouped-fields collapse" :id="'field-group-list-'+field.id">
        <li v-for="_field in field.fields" class="list-group-item" :id="'group_field_' + _field.id">
            <strong>Field: </strong> @{{ _field.name }}
            <p class="pull-right">
                <a href="#" class="btn btn-xs btn-primary edit-field" :data-field_id="_field.id" @click.prevent="editField(_field.id)"><i class="glyphicon glyphicon-pencil"></i></a>
                <a href="#" class="btn btn-xs btn-warning delete-field" :data-field_id="_field.id" @click.prevent="deleteGroupField(field, _field)"><i class="glyphicon glyphicon-trash"></i></a>
            </p>
        </li>
    </ul>
</li>