Я понял, что есть проблема при использованииФонд Зурб занятия вОтдельные файловые компоненты .vue, Сначала я не мог получитьВыявить Модал работать внутри.vue component но это работало, когда я использую тот же код вblade или жеhtml файл. Затем я заметил закономерность, потому что, когда я пытался использоватьОрбита Фонда внутри компонента это не удалось, сначала я подумал, что это ошибка, но потом я использовал тот же код вblade файл и все заработало. Другие базовые классы, такие какrow, grid а такжеbuttons работают просто отлично.

Кто-нибудь сталкивался с такой же проблемой? И как я могу обойти это?

Вот код для модального:

<a data-open="video" class="button warning" href="">WATCH VIDEO</a>

<div id="video" class="reveal" data-reveal>
    <div class="lead">
        <button class="close-button" data-close aria-label="Close modal" type="button">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="flex-video">
        <iframe width="1280" height="720" :src="url" frameborder="0" allowfullscreen></iframe>
    </div>
</div>

А для орбиты я использовал базовый пример в базовых документах для тестирования.

    <div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit>
  <ul class="orbit-container">
    <button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>&#9664;&#xFE0E;</button>
    <button class="orbit-next"><span class="show-for-sr">Next Slide</span>&#9654;&#xFE0E;</button>
    <li class="is-active orbit-slide">
      <img class="orbit-image" src="assets/img/orbit/01.jpg" alt="Space">
      <figcaption class="orbit-caption">Space, the final frontier.</figcaption>
    </li>
    <li class="orbit-slide">
      <img class="orbit-image" src="assets/img/orbit/02.jpg" alt="Space">
      <figcaption class="orbit-caption">Lets Rocket!</figcaption>
    </li>
    <li class="orbit-slide">
      <img class="orbit-image" src="assets/img/orbit/03.jpg" alt="Space">
      <figcaption class="orbit-caption">Encapsulating</figcaption>
    </li>
    <li class="orbit-slide">
      <img class="orbit-image" src="assets/img/orbit/04.jpg" alt="Space">
      <figcaption class="orbit-caption">Outta This World</figcaption>
    </li>
  </ul>
  <nav class="orbit-bullets">
    <button class="is-active" data-slide="0"><span class="show-for-sr">First slide details.</span><span class="show-for-sr">Current Slide</span></button>
    <button data-slide="1"><span class="show-for-sr">Second slide details.</span></button>
    <button data-slide="2"><span class="show-for-sr">Third slide details.</span></button>
    <button data-slide="3"><span class="show-for-sr">Fourth slide details.</span></button>
  </nav>
</div>