Мой код вкладок, который работает в простом HTML с использованием начальной загрузки 3.7 отлично не работает в vue.js

Question

// Я копирую код табуляции из начальной загрузки 3.7 на простой html странице, она работала отлично.Но когда я копирую тот же код в vue.js с cli 3, только на первой панели вкладок отображается правильный вывод, а после нажатия на другие вкладки они не отображают никакого вывода.Даже я импортировал bootstrap и jquery в проект vue.js.

// Я много пробовал, но не получилось.Но я решаю эту проблему, импортируя vue-bootstrap и заменяя bootstrap 3.7 на vue-bootstrap.Это работало нормально, но я хочу использовать простой загрузчик, а не vue-bootstrap.

<template>
  <div>

  <h2 id="Dashboard-down">Dashboard</h2>

// позволяет запускать вкладки Статус горячего кошелька (0/0)

Приостановленные переводы (0) Запросы на снятие средств (2) Запросы на поддержку (0) Запросы KYC (0)

  <div class="tab-content" id="tab-content-down">
    <div id="home" class="tab-pane fade in active">
      <div id="size">
        <!-- progress -->
        <div class="row" id="mg-btm">
          <div class="col-lg-1">
            <img src="../assets/bitcoin.png" alt="bitcoin" width="45px" height="45px">
          </div>
          <div class="col-lg-10">
            <div class="progress">
              <div class="progress-bar progress-bar-danger" id="pb" style="width: 1%">
              </div>
              <div class="progress-bar progress-bar-success" role="progressbar" style="width:80%">
              </div>
              <div class="progress-bar progress-bar-warning" id="pbbb" style="width:8%">
              </div>
              <div class="progress-bar progress-bar-danger" id="pbb" style="width:11%">
              </div>
            </div>
            <!-- <script>
              $('#pbbb').css({
                'background-color': "#00CBFF"
              })
              $('#pb').css({
                'background-color': "black"
              })
              $('#pbb').css({
                'background-color': "#7E00FF"
              })
            </script> -->
          </div>
        </div>
        <div class="row" id="mg-btm">
          <div class="col-lg-1">
            <img src="../assets/dashcoin.png" alt="bitcoin" width="50px" height="50px">
          </div>
          <div class="col-lg-10">
            <div class="progress">
              <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0"
                aria-valuemax="100" style="width: 100%">
                <span class="sr-only">90% Complete (success)</span>
              </div>
            </div>
          </div>
        </div>
        <div class="row" id="mg-btm">
          <div class="col-lg-1">
            <img src="../assets/eth.png" alt="bitcoin" width="45px" height="45px">
          </div>
          <div class="col-lg-10">
            <div class="progress">
              <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0"
                aria-valuemax="100" style="width: 100%">
                <span class="sr-only">90% Complete (success)</span>
              </div>
            </div>
          </div>
        </div>
        <div class="row" id="mg-btm">
          <div class="col-lg-1">
            <img src="../assets/lightcoin.png" alt="bitcoin" width="45px" height="45px">
          </div>
          <div class="col-lg-10">
            <div class="progress">
              <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0"
                aria-valuemax="100" style="width: 100%">
                <span class="sr-only">90% Complete (success)</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="menu1" class="tab-pane fade">
      <label> Transfers have been Suspended for:
      </label>
      <ul>
        <li>Bitcoin (BTC)</li>
      </ul>
    </div>
    <div id="menu2" class="tab-pane fade">

      <div class="row">
        <div class="col-lg-5">
          <p>User</p>
        </div>
        <div class="col-lg-2">
          <p>Currency</p>
        </div>
        <div class="col-lg-2">
          <p>Value</p>
        </div>
        <div class="col-lg-2">
          <p>Request date</p>
        </div>
        <div class="col-lg-1">

        </div>
      </div>


      <div id="box-borderss">
        <div class="row">
          <div class="col-lg-5">
            <p>haideryaqoobengr@gmail.com (1272)</p>
          </div>
          <div class="col-lg-2">
            <p>USD</p>
          </div>
          <div class="col-lg-2">
            <p>1.00</p>
          </div>
          <div class="col-lg-2">
            <p>Feburary 2,1017 13:29</p>
          </div>
          <div class="col-lg-1">

          </div>
        </div>
      </div>
      <div id="box-borderww">
        <div class="row">
          <div class="col-lg-5">
            <p>haideryaqoobengr@gmail.com (1272)</p>
          </div>
          <div class="col-lg-2">
            <p>USD</p>
          </div>
          <div class="col-lg-2">
            <p>1.00</p>
          </div>
          <div class="col-lg-2">
            <p>Feburary 2,1017 13:29</p>
          </div>
          <div class="col-lg-1">

          </div>
        </div>
      </div>
      <div id="box-borderss">
        <div class="row">
          <div class="col-lg-5">
            <p>haideryaqoobengr@gmail.com (1272)</p>
          </div>
          <div class="col-lg-2">
            <p>USD</p>
          </div>
          <div class="col-lg-2">
            <p>1.00</p>
          </div>
          <div class="col-lg-2">
            <p>Feburary 2,1017 13:29</p>
          </div>
          <div class="col-lg-1">

          </div>
        </div>
      </div>


    </div>
    <div id="menu3" class="tab-pane fade">
      <div class="row">
        <div class="col-lg-8">
          <p><strong>User</strong></p>
        </div>
        <div class="col-lg-4">
          <p><strong>Request date</strong></p>
        </div>
      </div>


      <div id="box-borderss">
        <div class="row">
          <div class="col-lg-8">
            <p>haideryaqoobengr@gmail.com</p>
          </div>
          <div class="col-lg-4">
            <p>December 24, 2014 11:54</p>
          </div>
        </div>
      </div>
    </div>
    <div id="menu4" class="tab-pane fade">
      <p><strong>No open KYC requests. You're awesome!</strong>
      </p>
    </div>
  </div>
</div>
</template>


I want my tabs work with out using vue-bootstrap