Почему gridstack.js меняет местами мои элементы, когда vue.js удаляет узел

Я пытаюсь настроить gridstack.js для работы с моими компонентами vue, как это сделано в этом примере нокаута: https://github.com/troolee/gridstack.js#use-with-knockoutjs/.

Вот код того, что у меня есть: https://codepen.io/nyoung697/pen/BperoZ

1. Добавьте 3 текстовых поля в форму, щелкнув «текстовое поле» 3 раза.
2. Удалите верхнее текстовое поле, наведя курсор мыши сверху и щелкнув корзину.

Удаление их сверху вниз работает нормально (так кажется). Самый новый элемент находится вверху, так как gridstack добавляет его вверх. Итак, это последний элемент в массиве.

1. Теперь попробуйте изменить размер текстовых полей и удалить их в случайном порядке.

Gridstack путается и меняет местами элементы на странице. Я понятия не имею, почему он это делает. Может кто-нибудь, пожалуйста, помогите мне понять это? Я ходил по кругу в течение нескольких недель, пробуя так много разных вещей.

Я добавил журнал консоли, чтобы показать, на какой идентификатор ссылаются. Когда вы удаляете элементы в порядке добавления последнего, идентификатор в «уничтоженном» методе такой же, как и у всех других методов/перехватчиков. Однако, если вы попытаетесь удалить их в случайном порядке, идентификатор, который печатается в методе уничтожения, будет другим.

уничтожено:

Vue.component('ntextbox', {
  template: '#textboxtemplate',
  props: ['component'],
  created () {
    console.log('created textbox control');
  },
  methods: {
    removeWidget: function(){
      console.log('child remove: ' + $(this.$el).attr('id'));
      this.$emit('remove');
    }
  },
  destroyed () {
    console.log('textbox control destroyed');
    var grid = $('.grid-stack').data('gridstack');
    console.log(grid);
    console.log($(this.$el).attr('id'));
    grid.removeWidget(this.$el);
    //console.log(grid);
  }
});