Vue.Draggable и динамические компоненты

Всех приветствую! Нужна помощь, голову совсем сломал. Существует компонент для редактирования настроек фильтрации FilterConditionVue. В нем динамически добавляются при необходимости различные фильтры (4 разных), которые являются компонентами vue. И эти фильтры необходимо перемещать в списке, для чего использую плагин Vue.Draggable. Причем мне нужна именно привязка плагина к массиву фильтров, чтобы при перемещении фильтра в браузере изменялся и порядок

Проблема в том, что в раузере при перемещении фильтра все введенные настройки фильтров слетают на дефолтные (нулевые).

Форумы перекурил, документацию переварил, стало плохо, но не помогло. Делал по примерам, но там все статические обычные объекты. Проблема как понял связанна именно с компонентами.

Итак код...

FilterConditionVue

<template>
            /** тут пробовал разные настройки, в т.ч. v-modal="conditionsItems" **/
            <draggable :list="conditionsItems"
                       :disabled="!enabled"
                       class="list-group"
                       ghost-class="ghost"
                       @start="dragging = true"
                       @end="dragging = false"
            >
                <template v-for="(conditionItem, index) in conditionsItems">
                    <component :key="index"
                               :is="conditionItem"
                               :itemIndex="index"
                               :itemId="null"
                               :ref="`field-${index}`"
                    ></component>
                </template>
            </draggable>
</template>
<script>
    import draggable from 'vuedraggable';
    import ConditionCategory from './ConditionCategory'
    import ConditionProperty from './ConditionProperty';
    import ConditionGood from "./ConditionGood";
    import ConditionFilter from "./ConditionFilter";
data() {
   return {
        conditionsItems: [],
        addType: null,

        enabled: true,
        dragging: false
   }
},
methods: {
            /** событие когда выбрали тип фильтра this.addType и нажали кнопку добавить */
            /** Собственно здесь и добавляется динамически фильтр **/
            onAddCondition() {
                let condition = null;
                if (this.addType !== null) {
                    if (this.addType === 'condition-property') {
                        condition = ConditionProperty;
                    } else if (this.addType === 'condition-good') {
                        condition = ConditionGood;
                    } else if (this.addType === 'condition-category') {
                        condition = ConditionCategory;
                    } else if (this.addType === 'condition-filter') {
                        condition = ConditionFilter;
                    } else {
                        alert('Выбран неизвестный тип для фильтра');
                    }
                }

                this.conditionsItems.push(condition);
            },
</script>

Код фильтров не привожу, они отрабатывают отлично без draggable.