Issue on showing a modal using vue js - vue.js

Question

I have some problem on how to display a bootstrap modal using vue.js and laravel 5.3. I just added the vue model inside blade.php but modal seems no working. Please see sample code below:
html:
<div id="project">
<button class="btn btn-primary" #click="showModal = true"><i class="icon-plus"></i> Add new</button>
<!-- Modal -->
<div class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Add Project</h4>
</div>
<div class="modal-body">
<form>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<input type="text" name="title" class="form-control" required="required" placeholder="Project Title">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input type="date" name="date" class="form-control" required="required" placeholder="Project Date">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="text" name="category" class="form-control" required="required" placeholder="Project Category">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<textarea name="desc" id="inputDesc" class="form-control" rows="3" placeholder="Project Description"></textarea>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="dropzone" id="project-thumbnail">
</div>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
script:
new Vue({
el: '#project',
data: {
showModal: false
}
})

Answer 1

Just add show class and v-if="showModal" to your modal:
<div class="modal fade in show" tabindex="-1" role="dialog" v-if="showModal" aria-labelledby="myModalLabel">
Build something cool!

Answer 2

There is nothing in your code to trigger it. If you aren't use bootstrap's data-modal then you need to use the Javascript API to open it documented here:
http://getbootstrap.com/javascript/#via-javascript
I.e. you need a method on your Vue that calls:
$('#myModal').modal('show');