md-tabs won't trigger "md-changed" event with route syncing enabled

[sigeryang]

Steps to reproduce

Environment

        "vue": "^2.6.12",
        "vue-material": "^1.0.0-beta-15",
        "vue-router": "^3.4.9"

Profile.vue

<style>
</style>

<template>
    <div>
        <md-content class="container">
            <div class="md-layout md-gutter md-alignment-top-center">
                <md-card
                    class="md-layout-item md-size-80 md-small-size-100"
                >
                    <md-card-header>
                        <div class="md-title">Tab</div>
                    </md-card-header>
                    <md-card-content>
                        <md-tabs @md-changed="onTabChanged" md-sync-route>
                            <md-tab id="tab-account" md-label="Account" to="/profile" md-icon="person" exact>
                            </md-tab>
                            <md-tab id="tab-notifications" md-label="Notifications" to="/profile/notifications" md-icon="notifications">
                            </md-tab>
                            <md-tab id="tab-tokens" md-label="Tokens" to="/profile/tokens" md-icon="api">
                            </md-tab>
                            <md-tab id="tab-credentials" md-label="Credentials" to="/profile/credentials" md-icon="share">
                            </md-tab>
                        </md-tabs>
                    </md-card-content>
                </md-card>
            </div>
        </md-content>
    </div>
</template>

<script>
export default {
    methods: {
        onTabChanged(index) {
            console.log('changed');
        }
    }
};
</script>

Route Setup

{
    path: '/profile/:tab?',
    name: 'profile',
    component: Vue.component('Profile', Profile)
}

What is expected?

Expected: When click a tab or first load the page, a changed event is emitted.

What is actually happening?

The event is emitted only when first load the page, clicking tabs won't emit the event.