VueJS listening custom events?

Question

And I'm trying to figure out how to get Vue listen for custom events (drag and drop). for instance I need to run this event:

pckry.on( 'layoutComplete', function( ) {
  pckry.layout();
});

Packery lib events http://packery.metafizzy.co/events.html

my code there: http://codepen.io/Monocle/pen/ZbeBGL

And how to update $data based on changes in the DOM (after reorder elements) ?

Answer 1

if you have a reference to the element. just add an event listener:

pckry.addEventListener('layoutComplete', (ev)=> {
        console.log('event~!');
      }, true);

you can take a look at this custom event stuff here https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener