Vue JS 2：可折叠菜单未关闭

Question

我正面临一个问题。

在移动版中，当我点击可折叠菜单时，它会打开，但是当我点击身体或其他时，它没有关闭。

<template>
<!-- Navbar -->
    <nav class="navbar navbar-expand-lg navbar-dark" data-navbar="sticky">
      <div class="container">

        <div class="navbar-left">
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-collapse">&#9776;</button>
          <a class="navbar-brand" href="index.html">
            <img class="logo-dark" src="/static/assets/img/logo-dark.png" alt="logo">
            <img class="logo-light" src="/static/assets/img/logo-light.png" alt="logo">
          </a>
        </div>
        <section class="navbar-mobile">
          <span class="navbar-divider d-mobile-none"></span>

          <ul class="nav nav-navbar mx-auto">
            <li class="nav-item">
              <a class="nav-link" href="#">Profiles <span class="arrow"></span></a>
              <nav class="nav">
                <a class="nav-link" href="demo/bootstrap.html">Students</a>
                <a class="nav-link" href="demo/dropbox.html">Investors</a>
                <a class="nav-link"> <router-link :to="{ name: 'ProfilePage' }">Your Profile</router-link></a>
              </nav>
            </li>

            <li class="nav-item">
              <a class="nav-link" @click ="goToQA()">Q & A <span class="arrow"></span></a>
            </li>

          </ul>
        </section>

        <a class="btn btn-xs btn-round btn-success" href="#">Buy Now</a>

      </div>
    </nav><!-- /.navbar -->
</template>
<script>
export default {
  name: 'Navbar',
  data () {
    return {
      msg: 'This is navbar',
      example: 'Testing'
    }
  }
}
</script>

我是Vue JS的新手。所以，提前帮助我。不要犹豫。