<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();

      
      },
    }
  })
}