Bootstrap modal button click not firing with click event - asp.net-mvc

Question

I am using a bootastrap modal inside a .Net MVC Razor page which uses Vue JS
The modal popup is initiated with a button click event like below
<div>
<button type="button" class="btn" v-on:click="rejectModal(item)">Reject Popup</button>
</div>
rejectModal: function (item) {
this.selectedItemReject = item; //set a property
console.log(this.selectedItemReject);
$('#declineModal').modal('show'); //show modal
},
This shows the popup and text area to enter a comment and when i am trying to click on SAVE Button , The click event seems to be not firing. I am planning to add the notes property to selectedItemReject object and proceed with an ajax call and hide popup on SAVE button click. But no idea why the button click event is firing
<div class="modal fade" id="declineModal" tabindex="-1" role="dialog" aria-labelledby="declineModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="declineModalLabel">Decline Note</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<textarea name="decline-notes" v-model="rejectNote" placeholder="Add a note..." rows="4" class="form-control"></textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button class="btn btn-primary" v-on:click="reject">SAVE</button>
</div>
</div>
</div>
</div>
reject: function () {
console.log("reject"); // NOT FIRING
}
Based on some suggestions already tried removing data-dismiss="modal" from close button , but no differece