VueJS integration with Foundation 6.4.0

Hello.vue

<template>
  <div class="grid-container">
    <div class="grid-x">
      <div class="callout">
        <p>
          The <tooltip :title="'Fancy word for a beetle.'" :fade-in-duration="800" :position="'right'">scarabaeus</tooltip> hung quite clear of any branches, and, if allowed to fall, would have fallen at our feet. Legrand immediately took the scythe, and cleared with it a circular space, three or four yards in diameter, just beneath the insect, and, having accomplished this, ordered Jupiter to let go the string and come down from the tree.
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import Tooltip from './Tooltip';

export default {
  name: 'hello',
  components: { Tooltip },
};
</script>

<style lang="scss">
@import '~foundation-sites/scss/foundation';
@include foundation-everything(); 
.callout {
  margin-top: 2rem;
}
</style>

Tooltip.vue

<template>
  <span class="has-tip" :title="title">
  <slot></slot>    
  </span>
</template>

<script>
/* eslint-disable */
import $ from 'jquery';
import whatInput from 'what-input';
import Foundation from 'foundation-sites';

export default {
  name: 'tooltip',
  props: [ 
    'title', 
    'hoverDelay', 
    'fadeInDuration',
    'fadeOutDuration',
    'disableHover',
    'templateClasses',
    'tooltipClass',
    'triggerClass',
    'showOn',
    'template',
    'tipText',
    'clickOpen',
    'position',
    'alignment',
    'allowOverlap',
    'allowBottomOverlap',
    'vOffset',
    'hOffset',
    'tooltipHeight',
    'tooltipWidth',
    'allowHtml',
  ],
  data() {
    return {
      tooltip: null,
    };
  },
  mounted() {
    this.tooltip = new Foundation.Tooltip($(this.$el), {
      hoverDelay: this.hoverDelay || 200,
      fadeInDuration: this.fadeInDuration || 150,
      fadeOutDuration: this.fadeOutDuration || 150,
      disableHover: this.disableHover || false,
      templateClasses: this.templateClasses || '',
      tooltipClass: this.tooltipClass || 'tooltip',
      triggerClass: this.triggerClass || 'has-tip',
      showOn: this.showOn || 'small',
      template: this.template || '',
      tipText: this.tipText || '',
      clickOpen: this.clickOpen || true,
      position: this.position || 'auto',
      alignment: this.alignment || 'auto',
      allowOverlap: this.allowOverlap || false,
      allowBottomOverlap: this.allowBottomOverlap || false,
      vOffset: this.vOffset || 0,
      hOffset: this.hOffset ||0 ,
      tooltipHeight: this.tooltipHeight || 14,
      tooltipWidth: this.tooltipWidth || 12,
      allowHtml: this.allowHtml || false,
    });
  }
};
</script>

<style>

</style>