I’m sending a mutation request for adding new product to my API in nuxt 3 app like this:

<script setup>
const myProducts = ref([]);
const addNewProductData= ref({id:1,name:'test'});
const isLoading = ref(false);
const total=ref(1);

const getAllQuery = gql`
        query fetchProducts{
          FetchProductPagination(
          page:1,
          limit:10,
        ){
          total
          data{
              id
              name
          }
        }
      }
 `;
 const fetchProducts = async () => {
  isLoading.value = true;
  const { data, error } = await useAsyncQuery(getAllQuery, null, "product");
  if (data.value) {
    myProducts.value = data.value.FetchProductPagination.data;
    total.value = data.value.FetchProductPagination.total;
  }
  isLoading.value = false;
};

const onSubmitEditPackageModal = async () => {
const query = gql`
  mutation UpdatePackage {
    UpdatePackage(
      id:${JSON.stringify(addNewProductData.id)},
      name: ${JSON.stringify(addNewProductData.name)}
    ) {
      id
      name
    }
  }
`;
  const { mutate, onDone } = await useMutation(query, { clientId: "product" });

  mutate();

  onDone(() => {
    fetchProducts()
  });
};


</script>

as you see in onDone method I’m calling my fetchProducts function so I can have my new data from the API that has just been added, but the new fetch request doesn’t send (i check it in network tab of browser) and my old data is still visible, while my function is called but its request doesn’t get sent

I’m a newbie to Graphql, and I couldn’t find any appropriate answer, so what is the problem, and why the new fetch request not sent?