When I refresh a page in Vue 3 , request is called but the component is not loaded

Question

I have a vue app which is something like this

<template>
<div class="text-center">
    <table class="table">
  <thead>
    <tr>
      <th scope="col">پاسخ</th>
      <th scope="col">سؤال</th>
      <th scope="col">شماره سؤال</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="question in this.questions" :key="question.id-1">
      <th scope="row"><input  class="form-check-input"  type="checkbox"   /></th>
      <td>{{question.question_text}}</td>
      <td>{{question.id-1}}</td>
    </tr>
  </tbody>
</table>
<button type="submit" class="btn btn-primary m-5" @click="handlsubmit">ثبت پاسخ</button>
</div>
</template>

<script>
export default {
  name: "InitialTest",
  data() {
    return {
      questions: this.$store.state.diagnosis.question
    };
  },
  beforeCreate() {
    this.$store.dispatch("diagnosis/insertQuestion");
  }

when it is loaded for the first time, it's okay but when i refresh the page, the request is called but the component doesn't load