Bootstrap button plugin conflicting with Vue checkbox click event

When I add bootstrap.min.js to my Vue application my checkboxes @click event is not being initiated. More specifically when using bootstrap’s button-group with data-toggle="buttons" If I remove bootstrap.min.js then the checkbox click event works as normal. What is causing this?

Link to Codepen
https://codepen.io/ben_jammin/pen/gNPVvw?editors=1000

  <div class="btn-group btn-group-toggle shadow mb-3" data-toggle="buttons" role="group" aria-label="String Operations">
    <label class="btn btn-primary">
      <input @click="reverseString" type="radio" name="options" checked> Reverse
    </label>
    <label class="btn btn-primary">
      <input type="radio" name="options"> Palindrone
    </label>
    <label class="btn btn-primary">
      <input type="radio" name="options"> Uppercase
    </label>
    <label class="btn btn-primary">
      <input type="radio" name="options"> Reset
    </label>
  </div>

https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js

Bootstrap Button plugin
https://getbootstrap.com/docs/4.3/components/buttons/#button-plugin

Answer

Vue and Jquery are not meant to be together and it’ll conflict at some point.

As it says on the Bootstrap website:

Many of our components require the use of JavaScript to function. Specifically, they require jQuery, Popper.js, and our own JavaScript plugins.

I would recommend you to use bootstrap-vue or if you want to try another framework, Element or Vuetify:

https://bootstrap-vue.js.org/docs/components/button-group

https://element.eleme.io/#/en-US/component/installation

https://vuetifyjs.com/en/components/button-groups

If you REALLY NEED IT, you can use a wrapper component but it’s better to avoid it.

Here are a few more details about how to deal with it: https://vuejsdevelopers.com/2017/05/20/vue-js-safely-jquery-plugin/