using bootstrap4 modal in vuejs - vue.js

Question

I am trying to render a modal with a simple change in my data using a vue #click on an element but I'm not able to get the modal to popup. I am hoping someone can point me in the right direction here.
I'm not using vue-bootstrap in this project just bootstrap 4 for reference here.
my click
<div class="d-flex justify-content-between">
<span class="d-block">These students cannot be in the same group:</span>
<button #click="showModal = true" class="btn btn-outline-primary btn-sm">Add constraint group</button>
</div>
my Modal
<!--MODAL SECTION-->
<div v-if="showModal" class="modal" id="myModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!--MODAL SECTION-->
my data
data:{
otherData: [],
showModal: false
}

Answer 1

You need data-toggle and data-target on the button:
<div class="d-flex justify-content-between">
<span class="d-block">These students cannot be in the same group:</span>
<button data-target="#myModal" data-toggle="modal" #click="showModal = true" class="btn btn-outline-primary btn-sm">Add constraint group</button>
</div>
See: https://getbootstrap.com/docs/4.0/components/modal/#via-data-attributes
Since the modal is controlled via some bootstrap internals, I do not think you need the v-if and #click handler.