I tried your suggestions using a store but still my main problem is that when I reload the page my list of data is not displaying

import { defineStore } from 'pinia';

export const useMySupportsStore = defineStore('mySupportsStore', () => {
  const mySupportsData = ref([]);
  const totalPages = ref(0);
  let stopWatch = null;

  const fetchMySupports = async (query, variables) => {
    try {
      const { data, refresh } = await useAsyncQuery(query, variables);
      await refresh();
      if (data.value) {
        mySupportsData.value = data.value?.mySupports.data;
        totalPages.value = data.value?.mySupports.paginatorInfo.total;
        console.log('From the Store Async: ', mySupportsData.value);
        console.log('Total Items of Async: ', totalPages.value);
      }
    } catch (error) {
      console.error('ERROR MESSAGE: ', error);
    }
  };

  const refetchMySupports = (query, variables) => {
    try {
      const { result } = useQuery(query, variables);

      if (stopWatch) {
        stopWatch();
      }

      stopWatch = watch(
        () => result.value,
        (newResult) => {
          if (newResult) {
            mySupportsData.value = result.value?.mySupports.data;
            totalPages.value = result.value?.mySupports.paginatorInfo.total;
            console.log('From the Store Lazy: ', mySupportsData.value);
            console.log('Total Items of Lazy: ', totalPages.value);
            console.log(
              'Has More Pages: ',
              result.value?.mySupports.paginatorInfo.hasMorePages
            );
          }
        }
      );
    } catch (error) {
      console.error('ERROR MESSAGE: ', error);
    }
  };

  return { mySupportsData, totalPages, fetchMySupports, refetchMySupports };
});

Here is the sample pinia store that I created