title: How can I change variant of Bootstrap Vue button style checkboxes when clicked
body: <p>I have utilised bootstraps button style checkboxes in a Vue JS project of mine, which works correctly and as it should, however, I want the button style checkboxes variant to change from <code>outline-secondary</code> to <code>success</code> when clicked.</p>
  
  <p>Could someone please advise on how this could be achieved?</p>
  
  <p>Below is a code snippet showing the options defaulted to the <code>outline-secondary</code> variant.</p>
  
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;b-form-group&gt;
        &lt;b-form-checkbox-group v-model="selected"
                               buttons
                               button-variant="outline-secondary"
                               name="buttons2"
                               :options="options"&gt;
        &lt;/b-form-checkbox-group&gt;
      &lt;/b-form-group&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    data () {
      return {
        selected: [],
        options: [
          {text: '1 week', value: '1 week'},
          {text: '1 month', value: '1 month'},
          {text: '1 year', value: '1 year'},
          {text: '1 decade', value: '1 decade'}
        ]
      }
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>Any help would be hugely appreciated.</p>
  
  <p>Cheers,</p>
  
  <p>Ant</p>