Nuxt useFetch/useAsyncData twice in method throws error: `nuxt instance not available`

I encounter the classical nuxt instance not available error when server side rendering a nuxt page containing the following logic:

<script setup>
const getImageOne = async () => {
  return await useFetch('https://dog.ceo/api/breeds/image/random');
};

const getImageTwo = async () => {
    return await useFetch('https://dog.ceo/api/breeds/image/random');
};

const getImages = async () => {
  return [await getImageOne(), await getImageTwo()];
};

const responses = await getImages();
const dogOne = responses?.[0]?.data?.value;
const dogTwo = responses?.[1]?.data?.value;
</script>

<template>
  <div>
    <p>Dog 1: {{ dogOne }}</p>
    <p>Dog 2: {{ dogTwo }}</p>
  </div>
</template>

The issue seems to be that useFetch is called twice in one method call.

The issue with composable usage raising nuxt instance not available errors is already well known, see issue #14723 for reference.

A solution in this case would be to use the callWithNuxt method and provide the nuxt instance manually like this:

<script setup>
import { callWithNuxt } from 'nuxt/app';

const getImageOne = async () => {
  return await useFetch('https://dog.ceo/api/breeds/image/random');
};

const getImageTwo = async (app) => {
  👇
  return await callWithNuxt(
    app,
    async () => await useFetch('https://dog.ceo/api/breeds/image/random')
  );
};

const getImages = async () => {
  👇
  const app = useNuxtApp();
  return [await getImageOne(), await getImageTwo(app)];
};

const responses = await getImages();
⋮