Why does it give an error on the server when refreshing the page?

Question

Vue.js

My dynamic page

<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)
        console.log(res);
        next(vm => {
            
            vm.data = res.card
            vm.componentName = res.category;
        })  
     }
}
</script>

Everything works properly, renders the component that is needed. But when updating the page itself, such an error occurs on the server - Cannot read property 'instances' of undefined
What could be wrong?