Error in nextTick what is the error in vue?

Question

Vue.js

There is a page that displays user data

import axios from 'axios';
    export default {
        data: function () {
            return {
                data: null,
            }
        },
        props: [
            'id',
            'authdata',
        ],
        created() {

        },
        beforeRouteEnter(to, __, next) {
            axios.post('/api/getuserinfo', {
                id: to.params.id
            }).then(response => {
                next(vm => {
                    if (response.data.errors == null){
                        vm.data = response.data;
                        console.log(to.params.id)
                    } else{
                        vm.$router.replace({name: '404'})

                    }
                })
            })
        },
    }

If you go to this page via router-link, then the page and data are displayed. But if I open the page through the address bar, I get errors in the console:

What am I doing wrong and how can I fix it?

Answer 1

The problem was in the location of the routes, it was

{
            path: '/',
            name: 'index',
            component: Index
        },
        {
            path: '/subs',
            name: 'subs',
            component: Subs,

        },
        {
            path: '/:name',
            name: 'subs.page',
            component: SubItem,
            props: true
        },
        {
            path: '/:name/:slug',
            name: 'subs.post',
            component: SubPost,
            props: true
        },
        {
            path: '/t/:name',
            name: 'tag.page',
            component: TagIndex,
            props: true
        },

I put
{
path: '/:name/:slug',
name: 'subs.post',
component: SubPost,
props: true
}
and it worked