typescript - Resolviendo dependencias circulares en los composables de Vue 3

Estoy tratando de usar funciones composables de Vue 3 para desacoplar la lógica de los componentes en mi aplicación. A medida que mis composables se vuelven más complejos, también se vuelven más dependientes entre sí. No quiero usar Vuex, ya que la tienda se volvió abultada con todo el estado quedándose allí, por lo que quiero que cada composable administre su propio estado. ¿Hay una manera más agradable de satisfacer la siguiente necesidad de composables dependientes?

A.ts

import {readonly, ref} from 'vue'
import {useB} from '@/use/A2'

const A = ref(1)

export function useA() {
  const {B} = useB()
  const output = () => {
    console.log('Output:', B.value)
  }
  return {
    A: readonly(A),
    output,
  }
}

B.ts

import {readonly, ref} from 'vue'
import {useA} from '@/use/A'

const B = ref(999)

export function useB() {
  const {A} = useA()
  const increment = () => {
    B.value += A.value
  }
  return {
    B: readonly(B),
    increment,
  }
}

Esto actualmente causa una dependencia circular, lo que resulta en un desbordamiento de pila. Quiero mantener las siguientes propiedades:

• Cualquier composable/componente puede importar desde A o B, y leer/utilizar sus respectivos datos
• Los objetos ref para A y B solo deben ser modificados por su composable (es decir, B o un componente no pueden cambiar el valor de A)