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,
}