Vue.js 为什么同一vue组件上的多个引导下拉菜单共享相同的选项？

我在同一个Vue.js组件中有两个下拉菜单。由于某些原因，第二个下拉列表中的选项不会出现。相反，第二个下拉列表显示与第一个下拉列表相同的选项。为什么会这样

数据切换应该是切换下拉菜单的标记的属性。将属性移动到锚定标记，它将正常工作

    <div class="d-flex">
      <div data-toggle="dropdown">
        <a href="#" class="btn btn-secondary ml-4_5">
          Dropdown1
          <i class="fal fa-angle-down"></i
        ></a>
        <ul class="dropdown-menu dropdown-menu-arrow">
          <li>

              Option A
            </li>
            <li> Option B
          </li>
        </ul>
      </div>               
      <div data-toggle="dropdown">
        <a href="#" class="btn btn-secondary ml-4_5">
        Dropdown2
          <i class="fal fa-angle-down"></i
        ></a>
        <ul class="dropdown-menu dropdown-menu-arrow">
          <li>
              Option 1</li>
            <li>Option 2
          </li>
        </ul>
      </div>  
     </div>