@click event doesn't work when runtimeConfig is used in Nuxt 3

I've built a simple reproduction here: <https://stackblitz.com/edit/github-jsuxnz-rst5gg-git?file=app.vue>

Essentially, @click works before I use runtimeConfig. As soon as I add const config = useRuntimeConfig();, all events stop working.

I've tried following this issue: <https://github.com/nuxt/nuxt/issues/13907>
But none of the suggestions worked for me, and the issue is still open.

Putting the runtimeConfig in if (process.server) { const config = useRuntimeConfig();
} gets the @click working again but introduces other issues with hydration from the server data.

How do I go about debugging this or finding a work around?

If you open your browser dev tools you'll see errors in the console. These errors have broken the page to the point where the page is no longer reactive or usable. If you fix the errors, you fix the page.

> Access to fetch at 'https://dummyjson.com/auth/login' from origin has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.

dummyjson doesn't use credentials: 'include' for its auth endpoint. Instead, perform your fetch with the options indicated by the docs

const response = await $fetch('/auth/login', {
  method: 'POST',
  baseURL: config.public.API_BASE_URL,
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    username: config.EMAIL,
    password: config.PASSWORD,
  }),
});

Fixing that, the next error that appears is a 400 error. The response being

{"message":"Invalid credentials"}

If you look at the actual request sent by the browser, it does not include username or password in it's body. The problem now is the use of $fetch. Per the documentation (emphasis mine):
> It is recommended to use $fetch when posting data to an event handler, when doing client-side only logic, or combined with useAsyncData

I point out that $fetch is for client-side only logic because your keys config.EMAIL and config.PASSWORD are not public and therefore are server-side only. When you make requests using these keys, they don't get added to the request at all because your client side code does not have access to them. The solution is to use useFetch instead of $fetch

> The useFetch and useAsyncData composables ensure that once an API call is made on the server, the data is properly forwarded to the client in the payload.

const response = await useFetch('/auth/login', {
  method: 'POST',
  baseURL: config.public.API_BASE_URL,
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    username: config.EMAIL,
    password: config.PASSWORD,
  }),
});

This is now working.

updated Stackblitz