bootstrap nav组件产生多个active如何解决？

Question

想实现：
添加新的nav 同时跳转到新的nav界面

且在首次进入页面时候选择第一个nav

  <div id="app" class="container">
    <ul class="nav nav-tabs" role="tablist">
    /*循环遍历所有list；count的值保持等于新添加nav的id值*/
      <li :class= "(list.id===count)? 'active' : ''" v-for="(list, index) in shoppinglists" role="presentation">  
        <a :href="'#'+list.id" :aria-controls="list.id" role="tab" data-toggle="tab">{{ list.title }}&nbsp;
          <span class="glyphicon glyphicon-remove delete" @click="deleteList(index)"></span>
        </a>
      </li>
      <li role="presentation"  @click="addList()" ><a href="#" class="glyphicon glyphicon-plus add"></a></li>
    </ul>

    <div class="tab-content">
      <div :class= "index===count ? 'active' : ''" v-for="(list) in shoppinglists" class="tab-pane" role="tabpanel" :id="list.id">
        <shopping-list-component></shopping-list-component>
      </div>
    </div>
  </div>

问题是：当你点击其中一个标签后，再按+ 就会产生两个active...导致页面出现多个列表

正常应该是