Vue js v-link same route does not update content

Question

If I am on a route:

person/:slug

And I click the link:

<div v-for="person in persons" v-link="{ name: 'person', params: { slug: person.slug }}">

The URL will change the setting, but the actual content / component will not be updated. If I remove the update, it will be from the moment the URL is updated. I tried the canReuse property with no luck.

Routes

router.map({
    '/': {
        name: 'search',
        component: Search
    },
    '/person/:slug': {
        name: 'person',
        component: Person
    }
})

component:

<template>
    {{ person.slug }}
</template>


<script>
    import PersonRepository from '../person-repository.vue'

    export default {
        data () {
            return { person: null }
        },
        asyncData (resolve, reject) {
            return PersonRepository.get(this, this.$route.params.slug).then((person) => {
                return { person: person }
            })
        }
    }
</script>

Answer 1

Have you tried this with routers instead of asynchronous data? The recommended method is router hooks.

You definitely need a data hook: http://vuejs.imtqy.com/vue-router/en/pipeline/data.html

, . , , . .

export default {
    data () {
        return { person: null }
    },
    route:{ 
        data: function (transition) {
            return PersonRepository.get(this, this.$route.params.slug).then((person) => {
                return { person: person }
            })
        }
    }
}

, , . , $loadingRouteData, .

Answer 2

3+ vue-router $route, :

export default {
    data () {
        return { person: null }
    },

    watch: {
       // call the method if the route changes
       '$route': {
         handler: 'asyncData',
         immediate: true // runs immediately with mount() instead of calling method on mount hook
       }
    },

    methods: {
       asyncData () {
           // ... your person fetching code
       }
    }
}

. .