Comment ajouter un composant VueJS dynamique à Packery ?

Question

Bonjour, j'ai un problème avec Packery.

Sur la base de cette solution https://codepen.io/Monocle/pen/ZbeBGL

Chaque élément de la grille est un composant et dans app.js (fichier principal), j'initialise Packery en fonction de l'exemple donné.

  var pckry = new Packery(container, {
    itemSelector: '.grid-item',
    columnWidth: '.grid-sizer',
  });

Je veux maintenant gérer l'activation et la désactivation des composants, puis les faire glisser et les lier ou les délier à l'emballage. Mais le problème est que je ne peux pas faire packery comme un attribut de l'objet vue et juste faire this.pckry.getShiftPositions() (basé sur l'exemple : https://codepen.io/desandro/pen/PZrXVv ).

pckry.on( 'dragItemPositioned', function() {
  // save drag positions
  var positions = pckry.getShiftPositions( 'data-item-id' );
  localStorage.setItem( 'dragPositions', JSON.stringify( positions ) );
});

Le problème se situe au niveau de la manipulation de l'instance de l'objet Packery, je suppose que cela ne fonctionne pas.

this.pckry.on( 'dragItemPositioned', function() {
  // save drag positions
  var positions = this.pckry.getShiftPositions( 'data-item-id' );
  localStorage.setItem( 'dragPositions', JSON.stringify( positions ) );
});

Ça ne marche pas vraiment. Quand je le fais en tant que

this.pckry = newPackery(...);

Comment je peux gérer ça ?