Bootstrap вкладки недоступны Vuejs

Question

У меня есть вкладка bootstrap, которая работает нормально, проблема в том, что она недоступна таким образом, что при фокусировке на вкладках с помощью кнопок со стрелками на клавиатуре фокус не изменяется. Это код для моих вкладок:

HTML

<ul class="nav nav-tabs" role="tablist">
      <li
        role="presentation"
        :class="[
            activeSection == 'step-1' ? 'active': '',
            maxStep > 1 ? 'completed': ''
        ]">
        <a
            href="#step-1"
            id="accountInfoTab"
            role="tab"
            tabindex="0"
            aria-controls="accountInfo"
            :aria-expanded="activeSection == 'step-1' ? 'true': 'false'">
        </a>
      </li>
      <li
        role="presentation"
        :class="[
            activeSection == 'step-2' ? 'active': '',
            maxStep > 2 ? 'completed': ''
        ]">
        <a
            href="#step-2"
            id="personalInfoTab"
            role="tab"
            aria-controls="personalInfo"
            :aria-expanded="activeSection == 'step-2' ? 'true': 'false'"
            aria-expanded="false"
            :disabled="isDisabled(2)"
            :tabindex="isDisabled(2) ? '-1': '0'">
        </a>
      </li>
      <li
        role="presentation"
        :class="[
            activeSection == 'step-3' ? 'active': '',
            maxStep > 3 ? 'completed': ''
        ]">
        <a
            href="#step-3"
            role="tab"
            id="preferencesTab"
            aria-controls="preferences"
            :aria-expanded="activeSection == 'step-3' ? 'true': 'false'"
            :disabled="isDisabled(3)"
            :tabindex="isDisabled(3) ? '-1': ''">
        </a>
      </li>
      <li
        role="presentation"
        :class="[
            activeSection == 'step-4' || activeSection == 'terms' ? 'active': '',
            maxStep > 4 ? 'completed': ''
        ]">
        <a
          href="#step-4"
          role="tab"
          id="summaryTab"
          aria-controls="summary"
          :aria-expanded="activeSection == 'step-4' ? 'true': 'false'"
          :disabled="isDisabled(4)"
          :tabindex="isDisabled(4) ? '-1': ''">
        </a>
      </li>
</ul>


  <div
    id="registrationFlowTabContent"
    class="tab-content"
    :class="[
        activeSection == 'terms' ? 'wide-content' : '',
        displayAlert ? 'alert-displayed': ''
    ]">
    <!-- accountInfo Tab -->
    <div
        role="tabpanel"
        v-show="activeSection == 'step-1'"
        class="tab-pane fade"
        :class="activeSection == 'step-1'? 'active in': ''"
        id="accountInfo"
        aria-labelledby="accountInfoTab"
        aria-hidden="false"
        aria-expanded="true">
            <!-- some content -->
        </div>

    <!-- personalInfo Tab -->
    <div
        role="tabpanel"
        v-show="activeSection == 'step-2'"
        class="tab-pane fade"
        :class="activeSection == 'step-2'? 'active in': ''"
        id="personalInfo"
        aria-labelledby="personalInfoTab"
        aria-hidden="true"
        aria-expanded="false">
            <!-- some content -->
    </div>

    <!-- preferences Tab -->
    <div
        role="tabpanel"
        v-show="activeSection == 'step-3'"
        :class="activeSection == 'step-3'? 'active in': ''"
        class="tab-pane fade"
        id="preferences"
        aria-labelledby="preferencesTab"
        aria-hidden="true"
        aria-expanded="false">
            <!-- some content -->
    </div>

    <!-- summary Tab -->
    <div
      role="tabpanel"
      v-show="activeSection == 'step-4'"
      class="tab-pane fade"
      :class="activeSection == 'step-4'? 'active in': ''"
      id="summary"
      aria-labelledby="summaryTab"
      aria-hidden="true"
      aria-expanded="false">
        <!-- some content -->
    </div>
</div>

Функция javascript только отклоняет / активирует вкладки и не делает их доступными Работа. Итак, я хотел бы знать, как сделать их доступными? Я считаю, что я должен реализовать некоторые списки событий, верно? Если да, как бы я это сделал в Vuejs?

ОБНОВЛЕНИЕ

Хорошо, поэтому я добавил этот фрагмент javascript, который дает мне возможность перемещаться между вкладками но вот в чем дело. скажем, я на первой вкладке. При нажатии клавиши со стрелкой вправо вы переходите к следующей вкладке, которая является правильной, но:

1 - Если вкладка отключена, она не должна перемещать фокус на нее (что она делает). 2-Если включена следующая вкладка, и после нажатия клавиши со стрелкой вправо фокус переходит на нее, я хочу, чтобы содержимое отображалось немедленно. Прямо сейчас я должен нажать Enter, чтобы он показал содержимое. 3-Я хочу, чтобы клавиша ввода перемещала фокус на следующий элемент с возможностью фокусировки в содержимом панели вкладок вместо выбора этой вкладки.

tabAccessibility(){
  var tabs = $("#exTab2");
  var tabsList = tabs.find("ul:first").attr({    
    "role": "tablist"
  });
  $(tabsList).find("li > a").each(
    function() {
      var tab = $(this);
      tab.click(
        function(e) {
          e.preventDefault();
          tab.focus();
        }
      );
    }
  );
  $(tabsList).delegate("a", "keydown",
    function(e) {

      var tab = $(this);
      switch (e.which) {
        case 37:
        case 38:
          //case 38:
          e.preventDefault();
          if (tab.parent().prev().length !== 0 ) {
            console.log(tab.parent().prev())
            tab.parent().prev().find("> a").click();
          } else {
            console.log(tab.parent().prev())
            $(tabsList).find("li:last > a").click();
          }
          break;
        case 39:
        case 40:
          e.preventDefault();
          if (tab.parent().next().length !== 0) {
            tab.parent().next().find("> a").click();
          } else {
            $(tabsList).find("li:first > a").click();
          }
          break;
      }
    }
  );
}