<div id="app">
  <div>
    <b-button size="sm" @click="toggle">
      Toggle Dropdown
    </b-button>
    <b-dropdown ref="dropdown" id="dropdown-1" text="Dropdown Button" class="m-md-2">
      <b-dropdown-item>First Action</b-dropdown-item>
      <b-dropdown-item>Second Action</b-dropdown-item>
      <b-dropdown-item>Third Action</b-dropdown-item>
      <b-dropdown-divider></b-dropdown-divider>
      <b-dropdown-item active>Active action</b-dropdown-item>
      <b-dropdown-item disabled>Disabled action</b-dropdown-item>
    </b-dropdown>
  </div>
</div>
body { padding: 1rem; }
window.onload = () => {
  new Vue({
    el: '#app',
    data() {
      return {
        name: 'BootstrapVue',
        show: false
      }
    },
    methods: {
      toggle() {
      
        this.show = !this.show
      
      
        if(!!this.show) this.$refs.dropdown.show();
        else this.$refs.dropdown.hide();

      
      },
    }
  })
}
View Compiled

External CSS

  1. https://unpkg.com/[email protected]/dist/css/bootstrap.min.css
  2. https://unpkg.com/[email protected]/dist/bootstrap-vue.css

External JavaScript

  1. https://unpkg.com/babel-polyfill/dist/polyfill.min.js
  2. https://unpkg.com/[email protected]/dist/vue.min.js
  3. https://unpkg.com/[email protected]/dist/bootstrap-vue.js
  4. https://unpkg.com/[email protected]/dist/bootstrap-vue-icons.js