Page.vue

<template>
  <view-default>
    <h1>Title {{$route.params.slug}}</h1>
    <p v-if="pages[0].header">{{pages[0].header.title_en}}</p>
    <p v-if="pages[0].header">{{pages[0].header.description_en}}</p>
  </view-default>
</template>

<script>
// @ is an alias to /src
import ViewDefault from '@/layouts/ViewDefault'
import gql from 'graphql-tag'

export default {
  name: 'page',
  components: {
    ViewDefault
  },
  data () {
    return {
      pages: '',
      slug: this.$route.params.slug
    }
  },
  apollo: {
    pages: {
      query: gql`
        query Pages($slug: String!) {
          pages (where: {slug: $slug}) {
            slug
            header {
              title_en
              description_en
            }
          }
        }
      `,
      variables () {
        return {
          slug: this.slug
        }
      }
    }
  },
  watch: {
    '$i18n.locale': function () {
      console.log('Locales changed')
      // this.slug = null
      // this.$apollo.queries.pages.refetch()
    },
    $route (to, from) {
      // console.log('Route changed')
      // console.log(to, from)
      this.slug = to.params.slug
      this.$apollo.queries.pages.refetch()
    }
  }
}
</script>