Vue: Not rendering the component for the second time on routing - vue.js

Question

I am facing behavior of Vue which I don't understand. I am using routing between components.
methods: {
redirectToLogin() {
this.$router.push("/login");
},
redirectToRegister() {
this.$router.push("/register");
}
}
So when load the app, route Login component, login successfully and then log out to component with methods above. After this when I am trying to route to login again the Login component is not rendered, but the route is shown in the address line
Below you can see my routes
routes: [
{path: '/', name: 'Hello', component: Hello},
{path: "/login",name:'Login', component: Login},
{path: "/register",name:'Register', component: Register},
{path: "/user/:id",name:'User', component: User},
{path: "/reset",name:'PasswordReset', component: PasswordReset},
]
I am also using Vuex can it somehow affect such behaviour?
UPD:
When I log out I see the following error in my console
TypeError: "t._data is undefined"
VueJS 14
$destroy
destroy
_
T
x
$
ji
_update
r
get
run
Yn
he
ue
vue.runtime.esm.js:1888:12
UPD 2 : Components
This is first component loaded to the app. After logging out route leads here and none of the router links work
export default {
name: 'Hello',
data() {
return {
msg: 'Work With your projects in agile manner'
}
}
}
Login component
export default {
name: "Login",
data() {
return {
errorOccurred: false,
errorMessage: '',
credentials: {
login: '',
password: ''
},
remember: false
}
},
methods: {
submit() {
this.$store.dispatch('loginUser', this.credentials).then(() => {
this.errorMessage = this.getError;
if (this.errorMessage.length) {
this.errorOccurred = true;
} else {
this.$router.push({path: '/user/' + this.getId});
}
});
this.errorOccurred = false;
},
resetPassword() {
this.$router.push("/reset");
},
},
computed: {
loginValidation() {
return this.credentials.login.length > 0
},
passwordValidation() {
return this.credentials.password.length > 0
},
getError() {
return this.$store.getters.getErrorMsg;
},
getId() {
return this.$store.getters.getUserId;
}
},
}
User component routed from login.
import NavbarCommon from "./NavbarCommon";
export default {
name: "User",
components: {NavbarCommon},
data(){
},
methods: {
loadAvatar(){
let image = '../../assets/emptyAvatar.png';
if ('avatar' in this.getUser){
image = this.getUser.avatar;
}
return image;
}
},
computed:{
getUser() {
return this.$store.getters.getUser;
}
}
}
And two two more components.
NavbarComponent - common navbar for several components
import NavbarRight from "./NavbarRight";
export default {
name: "NavbarCommon",
components: {NavbarRight},
methods:{
routeToUser(){
this.$router.push({path: '/user/' + this.getUser});
},
routeToProject(){
this.$router.push({path: '/project/' + this.getProject});
}
},
computed:{
getUser() {
return this.$store.getters.getUserId;
},
getProject(){
//TODO:
return 'get project id'
}
}
}
And right part of Navbar with logout button
export default {
name: "NavbarRight",
methods:{
logOut(){
this.$store.dispatch('logOutUser').then(()=>{
this.$router.push('/');
});
},
}
}

Answer 1

So the problem is really stupid.
In User component data missed return.
After adding
data(){
return {}
},
Everything started working