Vue-draggable - невозможно напрямую изменить мой массив

Я использую vue-draggable для изменения порядка элементов массива. Скажем, мой массив:

data: {
 array1: [{text: 'text1'},{text: 'text2'},{text: 'text3'}]
}

в моем шаблоне я просто использую:

<draggable v-model = "array1" >
v-for etc...
</draggable>

И это нормально работает.

Теперь мне нужно переместить код внутрь компонента и использовать array1 в качестве опоры.

Итак, я перемещаю свой array1 в props внутри дочернего компонента:

props['array1'],

Я использую свой vue-draggable и бац: "[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders."

Я не могу просто объявить array1 внутри данных, потому что он асинхронный. Итак, я пишу это внутри вычисленного:

   array2: {
      get: function () {
        //return JSON.parse(JSON.stringify(this.array1))          
        return this.array1.slice()          
      },
      set: function () {
        this.array2
      }
  },

и это явно не сработает, потому что геттер всегда жестко запрограммирован как slice () свойства. Вчера я задал вопрос: Вычисляемый сеттер vuejs данного свойства не является реактивным

Итак, совет состоит в том, чтобы написать какой-то новый вычисляемый и добавить оператор if внутри вычисленного array2:

   array2: {
      get: function () {
        if (this.modifiedArray) {
            return this.modifiedArray;
        }
        //return JSON.parse(JSON.stringify(this.array1))          
        return this.array1.slice()          
      },
      set: function () {
        this.proTemplate
      }
  },

и у меня проблема с обращением к измененным vue-draggable изменениям в modifiedArray computed, потому что я не могу изменить v-модель внутри draggable:

<draggable v-model = "array2">

Кто-нибудь знает, как изменить его, чтобы получить результат с перетаскиванием vue внутри внешнего массива / вычисления?