vue.js bootstrap-vue dynamically change alert variant

You need to bind the alertvariant prop to variant attribute like this:

<b-alert :variant="alertvariant" show>Success Alert</b-alert>

Note :variant is a shortcut for v-bind:variant

More info on data binding here

You can do it this way:

<b-button :variant="foo" @click="dataName = !dataName">Button Name</b-button>

//...

<script>
export default {
    name: 'componentName',
    data() {
        return {                       
            dataName: true //<--- define data
        }
    },
computed: {
    foo() {
      return this.dataName ? "success" : "warning"; //<--- define condition/s
    }
}
...