Why gridstack.js changes my elements around when vue.js removes node

Question

I am trying to configure gridstack.js to work with my vue components, as in this example: https://github.com/troolee/gridstack.js#use-with-knockoutjs/ .

Here is the code of what I have: https://codepen.io/nyoung697/pen/BperoZ

• Add 3 text fields to the form by clicking "text field" 3 times.
• Delete the top text box by hovering over the top and clicking on the trash can.

Removing them from top to bottom works fine (it seems). The newest item is at the top, as gridstack adds it to the beginning. So this is the last element in the array.

• Now try resizing the text fields and deleting them in random order.

Gridstack gets confused and changes elements on the page. I have no idea why this is being done. Can someone please help me figure this out? I traveled in circles many times over the course of several weeks, trying so many different things.

I added some console logs to show which identifier is referenced. When you delete items in the order in which they were added, the identifier in the “destroyed” method matches all other methods / hooks. However, if you try to delete them randomly, the identifier that is printed in the destroyed method is different.

destroyed:

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);
  }
});