Vue router id gets undefined when taken from vuex - vue.js

Question

I am trying to get the id of currently logged user from Vuex getters and pass it into the router link, but somehow it gets undefined, even though I console.log it and it shows legitimate user ID. In my template. Here I loop over an array of objects where I keep my route name:
<v-list dark class="mt-5 userList" style="background: #515151;">
<v-list-item
v-for="item in sideBar"
:key="item.title"
class="tile"
>
<router-link :to="item.route">
<span class="userIcon">
<v-list-item-icon>
<v-icon style="color: #FFA255">{{ item.icon }}</v-icon>
</v-list-item-icon>
</span>
<span class="userTitle">
<v-list-item-content>
<v-list-item-title style="color: #FFA255">
{{ item.title }}
</v-list-item-title>
</v-list-item-content>
</span>
</router-link>
</v-list-item>
</v-list>
I think this part speaks for itself My script section:
export default {
data() {
return {
userParams: null,
sideBar: [
{title: 'User', icon: 'note', component: 'UserInfo', route: `/user/${this.userParams}`},
{title: 'Rated albums', icon: 'note', component: 'Rated', route: `/user/${this.userParams}/rated`},
{title: 'Owned', icon: 'favorite', component: 'Owned', route: `/user/${this.userParams}/owned`},
{title: 'Settings', icon: 'settings', component: 'Settings', route: `/user/'${this.userParams}'/settings`},
],
}
},
computed: {
...mapGetters([
'getUserId'
])
},
created() {
this.userParams = this.getUserId;
console.log(this.userParams)
},
}
My router.js
{
path: '/user/:id',
component: User,
children: [
{
path: '/',
component: UserInfo,
name: 'userInfo'
},
{
path: 'owned',
component: Owned,
name: 'owned'
},
{
path: 'rated',
component: Rated,
name: 'rated'
},
{
path: 'settings',
component: Settings,
name: 'settings'
}
],
beforeEnter (to, from, next) {
if(authStore.state.idToken) {
next()
} else {
next('/signin')
}
}
},

Answer 1

Make sideBar a computed property so it is re-evaluated when getUserId changes.
I don't see a reason to keep a copy of getUserId in userParams either.
computed: {
...mapGetters([ 'getUserId' ]),
sideBar () {
const params = { id: this.getUserId } // this is reactive
return [{
title: 'User',
icon: 'note',
route: { name: 'userInfo', params }
}, {
title: 'Rated albums',
icon: 'note',
route: { name: 'rated', params }
}, {
title: 'Owned',
icon: 'favorite',
route: { name: 'owned', params }
}, {
title: 'Settings',
icon: 'settings',
route: { name: 'settings', params }
}]
}
},
At the moment, your route strings are only calculated once when your component is created