Не работает перезагрузка страницы

Есть динамическая страница, которая выводит компонент в зависимости от ответа.

<template>
<div>
<component 
:is="componentName"
:data="data"
/>
</div>
</template>
 
<script>
import Card from '@/components/main/pages/Card'
import Post from '@/components/main/pages/Post'
import Tag from '@/components/main/pages/Tag'
export default {
    components: {
        Card,
        Post,
        Tag
    },
    data() {
          return {
            data: '',
            componentName: ''
          }
     },
     async beforeRouteEnter(to, from, next) {
 
        const store = from.matched[0].instances.default.$store
        const res = await store.dispatch('data/getData', to.params.slug)
        next(vm => {
            
            vm.data = res.card
            vm.componentName = res.category;
        })  
     }
}
</script>

Работает все исправно до того момента, пока я не перезагружу страницу. Проблема в том, что from.matched[0] возвращает undefined. Как можно исправить эту проблему?