Foundation 6 destroy and reinitialize on ember

i am trying to do destroy and reinitialize foundation 6 component in ember app. Currently i did these below. It works on the first click after that it won't trigger reinitialize:

// components/zf-reveal.js
import Ember from 'ember';

export default Ember.Component.extend({
  didInsertElement() {
    this._super(...arguments);
    Ember.Logger.log('open');
    this.set('reveal', new Foundation.Reveal(this.$('.reveal')));
  },
  willDestroyElement() {
    this._super(...arguments);
    Ember.Logger.log('destroy');
    this.get('reveal').destroy();
  }
});

// templates/components/zf-reveal.hbs
<a data-open="modal">OPEN REVEAL</a>
<div class="reveal" id="modal" data-reveal>
  <h1>Awesome. I Have It.</h1>
  <p class="lead">Your couch. It is mine.</p>
  <p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
  <button class="close-button" data-close aria-label="Close modal" type="button">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

These snippets do destroy on route change but when i try to click it again after route change it's not reappearing wont even sending error message