Example of useFetch serialisation stripping away functions from object during clientside hydration

gistfile1.txt

<template>
  <h1>{{ someObj.someFunction() }}</h1>
</template>

<script>
import { useFetch } from '@nuxtjs/composition-api';
import { doSomethingAsync } from './helpers';

export default {
  setup() {
    function someFunction() { return 'test' };
    const someObj = { someFunction };
    
    useFetch(async () => {
      await doSomethingAsync();
    });
    
    return { someObj };
  }
};
</script>

/**
 * During serverside rendering, someObj.someFunction can be called correctly in the template.
 * During clientside hydration, someObj becomes an empty object `{}`, and the above template fails 
 * as "someObj.someFunction is not a function"
 *
 * If I remove the `useFetch()` call entirely, someObj no longer becomes an empty object during hydration.
 * I believe `useFetch` must be serialising the objects for hydration, which is stripping all values 
 * that are functions, as they cannot be serialised.
 *
 * How can I avoid this behaviour?
 * Using `onServerPrefetch` instead avoids this behaviour, but I imagine I'm losing the caching benefits of `useFetch`.
 */

Potentially I could use onServerPrefetch, and to wrap it up with clientside route changes too I could do something like this and use onSsr?

const hasRouteChanged = (vm) => {
  const { from } = vm.proxy.$router.app.context;
  const { current } = vm.proxy.$router.history;

  if (!from) {
    return false;
  }

  return from.fullPath !== current.fullPath;
};

function onSsr(fn {
  onServerPrefetch(fn);
  if (typeof window !== 'undefined') {
    const vm = getCurrentInstance();

    if (hasRouteChanged(vm)) {
      fn();
    }
  }
}