Fetch data using QueryParams on GraphQL in Apollo Vue

Question

I want to fetch data from GraphQL, I've tried with static params and it worked. But when I tried to use QueryParams, it returned error 404 on my network.

I want my GraphQL query to become dynamic parameter. Can anyone give me solution about use QueryParams on GraphQL in Apollo Vue?

  data(){
    return{
      idLabel:3
    }
  },

//my file .gql
query post($idLabel:Int!){
    post(id: $idLabel) {
        id
        title
        body
        comments(options:{paginate:{page:1 limit:10}}){
            data{
            id
            name
            email
            }
        }
    }
}

  <ApolloQuery
     :query="require('./graphql/PostGraphqlzero.gql')"
     :variables="{ idLabel }"
  >
    <template v-slot="{ result: { loading, error, data } }">
      <!-- Loading -->
      <div v-if="loading" class="loading apollo">Loading...</div>

      <!-- Error -->
      <div v-else-if="error" class="error apollo">An error occurred</div>

      <!-- Result -->
      <div v-else-if="data" class="result apollo">
        <div v-for="(todo) in data" :key="todo.id">
          <div  class="alert alert-primary" role="alert"> {{todo.title}}</div>
          <div v-for="(todos) in todo.comments.data" :key="todos.id">
            {{todos.name}}
          </div>
        </div>
      </div>

      <!-- No result -->
      <div v-else class="no-result apollo">No result :(</div>
    </template>
    <!-- TODO -->
  </ApolloQuery>

Buckshee