Rendering custom styles in bootstrap-vue

This is beacause you are making the styles scoped to the component and since bootstrap vue dropdown is another component you wont be able to do this with scoped styles.

https://vue-loader.vuejs.org/guide/scoped-css.html

Try removing the scoped attribute like this.

<style>
  #dropdownMenuButton > button {
    width: 100%;
  }

  #dropdownMenuButton__BV_toggle_ {
    width: 100%;
  }
</style>

You can also use the /deep/ keyword to just affect child components, if you don't want to clutter global styles:

<style scoped>
  /deep/ #dropdownMenuButton > button {
    width: 100%;
  }

  /deep/ #dropdownMenuButton__BV_toggle_ {
    width: 100%;
  }
</style>