Server side fetch refetches on client 3 times

export default defineNuxtPlugin(() => {
  const { apiDomain } = useAppConfig();

  const api = $fetch.create({
    baseURL: apiDomain,
    onRequest({ options }) {
      const localeCookie = useCookie('i18n_redirected');

      if (localeCookie.value) {
        const headers = (options.headers ||= {});
        if (Array.isArray(headers)) {
          headers.push(['X-Localization', localeCookie.value]);
        } else if (headers instanceof Headers) {
          headers.set('X-Localization', localeCookie.value);
        } else {
          headers['X-Localization'] = localeCookie.value;
        }
      }
    },
  });

  // Expose to useNuxtApp().$api
  return {
    provide: {
      api,
    },
  };
});

import type { UseFetchOptions } from 'nuxt/app';

export function useAPI<T>(
  url: string | (() => string),
  options?: Omit<UseFetchOptions<T>, 'default'> & { default?: () => T | Ref<T> },
) {
  return useFetch(url, {
    ...options,
    $fetch: useNuxtApp().$api,
  });
}

import { useAPI } from '~/shared/composables/use-api';
import type { Menu } from './types';

export const getMenus = () => {
  // We call this api method in app.vue which is not re-render on locale switch
  // so we manually watch changing this cookie to trigger re-fetch with new locale
  const cookie = useCookie('i18n_redirected');
  return useAPI<{ data: { menus: Menu[] } }>('/menus', { watch: [cookie] });
};