how do i open a modal component by a link - vue.js

Question

i want to open a modal from a tab link but only a fade screen shows when i click register subjects link
snippet from show.blade.php file to display selected student
<div class="row">
<div class="col-md-2">
<div class="tile p-0">
<ul class="nav flex-column nav-tabs user-tabs">
<li class="nav-item"><a class="nav-link" href="#" data-target="#registersubjects" data-toggle="modal">Register Subjects</a></li>
</ul>
</div>
<div class="modal fade" id="registersubjects">
<subject-registration :studentid="{{$targetStudent->id}}"></subject-registration>
</div>
</div>
This is my SubjectRegistrations.vue component
<template>
<div id="app">
<div class="modal-content">
<!-- modal header-->
<div class="modal-header bg-success text-white">
<h4 class="modal-title" id="addPostModalLabel">Subject Registration</h4>
<button type="button" class="close" data-dismiss="modal"><span>×</span></button>
</div>
!-- modal body-->
<div class="modal-body">
<table class="table table-hover table-bordered" id="sampleTable">
<thead>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</template>
<script>
export default {
name: "subject-registrations",
props: ['studentid'],
data()
{
return {
}
},
created: function(){
},
methods:{
}
}
this my component registration in appjs
Vue.component('subject-registrations', require('./components/SubjectRegistrations.vue').default);