Fetch on Page and component

I have a component <Categories/> on the main page. and on the main page I'm using fetch to dispatch an action.

in my component <Categories/>, I use fetch as well which is working just fine.

I have refresh token implemented in nuxt so if I went to the main page and my token expired the refresh URL gets called once. but it doesn't! it gets called twice ... if I only used fetch on main page only it works as expected.

  async fetch() {
    await this.$store.dispatch(
      "pub/getalll",
      "/api/u/all?limit=" + this.pageSize + "&page=" + this.currentPage
    );
  },

I know I can handle <Categories/> on main page fetch but i wanted to control the fetch state for the component itself .

On <Categories/> I tried on mounted but the URL keeps getting called twice. and also fetchOnServer: false

in all other pages where I have fetch or asyncData the refresh URL gets called once only .which is the expected behavior.

I don't understand where the issue is? any idea?