Resolving circular dependencies in Vue 3 composables

I am trying to use Vue 3 composable functions to decouple logic from components in my application. As my composables are getting more complex, they are also becoming more dependent on each other. I do not want to use Vuex as the store became bloated with all the state staying there, so I want each composable to manage its own state. Is there a nicer way to meet the following need of dependent composables?

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,
  }
}

This currently causes a circular dependency, resulting in a stack overflow. I want to maintain the following properties:

• Any composable/component can import from either A or B, and read/use its respective data
• The ref objects for A and B should only be modified by their composable (i.e. B or a component cannot change the value of A)