boostrap modal not updating with vue js v2 two way binding

I'm new to vue js and trying to use it with a bootstrap modal to view more data. My scenario is a table with multiple records and a button to see in depth details for the clicked record in a bootstrap modal. After clicking the first button it caches and doesn't update it while selecting another button for different details.

Does anyone see what I'm doing wrong?

(It's a combination of Laravel, jQuery and VueJS)

HTML Table:

<table class="table table-striped">
<thead>
    <tr>
        <th>E-mail address</th>
        <th>Status</th>
        <th>Sent at</th>
        <th>Expires in</th>
        <th></th>
    </tr>
</thead>
<tbody>
    <tr>
        <td class="v-align-middle">
            john@doe.example
        </td>
        <td class="v-align-middle">
            <span class="label label-default">
                pending
            </span>
        </td>
        <td class="v-align-middle">
            2017-06-05 17:59:15
        </td>
        <td class="v-align-middle">
            29 days
        </td>
        <td>
            <div class="btn-group pull-right">
                <a href="#" class="btn btn-default" data-toggle="modal" data-target="#inviteDetailsModal" data-email="john@doe.example">
                    <i class="fa fa-eye"></i>
                </a>
            </div>
        </td>
    </tr>
    <tr>
        <td class="v-align-middle">
            jane@doe.example
        </td>
        <td class="v-align-middle">
            <span class="label label-default">
                pending
            </span>
        </td>
        <td class="v-align-middle">
            2017-06-05 13:27:25
        </td>
        <td class="v-align-middle">
            29 days
        </td>
        <td>
            <div class="btn-group pull-right">
                <a href="#" class="btn btn-default" data-toggle="modal" data-target="#inviteDetailsModal" data-email="jane@doe.example">
                    <i class="fa fa-eye"></i>
                </a>
            </div>
        </td>
    </tr>
</tbody>

JavaScript:

$('[data-target="#inviteDetailsModal"]').on('click', function () {
    let email = $(this).data('email'),
        baseUrl = $('html').data('base');

    Vue.component('invite-details', {
        data: function () {
            return {
                email: null,
                token: null,
                logs: [],
                expires: null
            }
        },
        methods: {
            update: function (data) {
                this.email = data['email'];
                this.token = data['token'];
                this.logs = data['logs'];
                this.expires = data['expires'];
            },
            fetchData: function () {
                this.$http.get(baseUrl + '/system/invites/' + email + '/details')
                    .then(response => {
                        this.update(response.body);
                    }, response => {
                        console.log('whoops something went wrong');
                    });
            }
        },
        mounted: function () {
            this.$el.addEventListener('shown.bs.modal', this.fetchData());
        },
        beforeDestroy: function () {
            this.$el.removeEventListener('shown.bs.modal', this.fetchData());
        }
    });

    new Vue({
        el: '#inviteDetailsModal'
    });
});

The bootstrap modal:

<div class="modal fade slide-up" id="inviteDetailsModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content-wrapper">
        <invite-details inline-template>
            <div class="modal-content" id="details">
                <div class="modal-header clearfix text-left">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        <i class="pg-close fs-14"></i>
                    </button>
                    <h5>
                        Invite details for <span class="semi-bold">@{{ email }}</span>
                    </h5>
                    <p class="p-b-10">
                        <span data-tooltip="true" data-placement="bottom" title="token">
                            <em>@{{ token }}</em>
                        </span>
                    </p>
                </div>
                <div class="modal-body">
                    <table class="table table-striped">
                        <thead>
                        <tr>
                            <th>#</th>
                            <th>Sent at</th>
                            <th>Status</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="log in logs">
                            <td>@{{ log.number }}</td>
                            <td>@{{ log.sentAt }}</td>
                            <td>@{{ log.status }}</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer text-center">
                    <span class="hint-text">
                        <em>expires in <strong>@{{ expires }}</strong> days</em>
                    </span>
                </div>
            </div>
        </invite-details>
    </div>
</div>