Why is gridstack.js swapping my elements around when vue.js removes a node

Question

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

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

1. Add 3 textboxes to the form by clicking 'textbox' 3 times.
2. Delete the top textbox by hovering overtop and clicking the trash can.

Deleting them from the top down works fine (so it seems). The newest element is at the top, as gridstack is adding it to the top. So this is the last element in the array.

1. Now try resizing the textboxes and deleting them in a random order.

Gridstack is getting confused and swapping elements around on the page. I have no idea why it is doing this. Can someone please help me figure this out? I have been going around in circles for weeks trying so many different things.

I added some console logging to show what id is being referenced. When you delete the elements in order of the last one added, the id in the "destroyed" method is the same as all the other methods/hooks being hit. However if you try to delete them in a random order, the id that is being 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);
  }
});