Vue-apollo refetch/update data after prop change - vue.js

Question

I'm having a problem with refeching data when my prop(id) is changing.
-- moveing between profiles (profile/1 to profile/2) --
I scour through the internet to find some information. Tried this.$forceUpdate, some methods too but nothing seems to resolve my problem. Adding :key to components only refresh first one "profile-header" but not working on other in "section".
Any idea to how to solve it? I will appreciate any help.
Im new to vue.
profile.vue
<template>
<div
v-if="Object.keys(user).length"
id="user-profile"
>
<profile-header
:header-data="user"
/>
<!-- profile info -->
<section id="profile-info">
<b-row>
<b-col
lg="3"
cols="12"
order="2"
order-lg="1"
>
<profile-about
:about-data="user"
/>
<profile-suggested-pages
:pages-data="user"
/>
</b-col>
<b-col
lg="6"
cols="12"
order="1"
order-lg="2"
>
<profile-post
:posts="user"
/>
</b-col>
</b-row>
</section>
</div>
</template>
<script>
import gql from 'graphql-tag'
import ProfileHeader from './ProfileHeader.vue'
import ProfileAbout from './ProfileAbout.vue'
import ProfileSuggestedPages from './ProfileSuggestedPages.vue'
import ProfilePost from './ProfilePost.vue'
export default {
components: {
ProfileHeader,
ProfileAbout,
ProfileSuggestedPages,
ProfilePost,
},
data() {
return {
routeParam: this.$route.params.id,
user: { },
}
},
watch: {
$route(from) {
console.log(this.$route.params.id)
console.log(this.user.id)
},
},
apollo: {
user: {
query: gql`
query User($id: ID!) {
user(id: $id) {
// query //
`,
variables() {
return { id: this.routeParam }
},
},
},
}
</script>
routes
{
path: '/profil/:id',
name: 'profile',
component: () => import('#/views/profile/Profile.vue'),
props: true,
}