javascript - VueJS で別のコンポジションからコンポジション関数を呼び出す方法

Question

VueJS で新しい合成 API を試してみましたが、問題を解決する方法がわかりません。ソリューションを適切に実装する方法についてのアドバイスを探しています。問題なくアクションを別のモジュールにディスパッチできるため、すべてが vuex ベースの場合、これは問題ではありませんでした。ただし、コンポジションの実装の解決策を見つけるのに苦労しています。

問題：

1. ComponentはCompositionAの関数を呼び出します。
2. CompositionAは、ログイン機能をトリガーします。
3. CompositionAのログイン成功/失敗応答で、 CompositionB関数を呼び出したいと思います。(CompositionB には、サイト全体で使用されるスナックバーを表示するためのデータとロジックが含まれています)

問題は、Snackbar 依存関係をCompositionAからインスタンス化/マウントするのではなく、すべてのコンポーネントに挿入する必要があることです。現在の解決策は、この趣旨です：

Component.vue:

// template calls login(credentials) method
import { useCompositionA } from '@/compositions/compositionA'
import { useCompositionB } from '@/compositions/compositionB'
export default {
  name: 'Component',
  setup(props, context) {
    const { login } = useCompositionA(props, context, useCompositionB(props, context))
    return {
      login
    }
  },
}

compositionA.js:

export const useAuth = (props, context, snack) => {
  const login = async (credentials) => {
    try {
      return await loginWithEmailPassword(credentials)
      snack.show({text: 'Welcome back!'})
    } catch (err) {
      snack.show({text: 'Failed to login'})
    }
  }
  return { login }
}


compositionB.js:

export const useSnack = (props, context) => {
  const snack = reactive({
    color: 'success',
    text: null,
    timeout: 6000,
    visible: true,
  })

  const snackRefs = toRefs(snack)

  const show = ({ text, timeout, color }) => {
    snackRefs.text.value = text
    snackRefs.timeout.value = timeout || 6000
    snackRefs.color.value = color || 'success'
    snackRefs.visible.value = true
  }
  return { 
    ...snackRefs,
    show
  }
}

以下のようなものがあればいいのですが、CompositionA から使用されている場合、CompositionB でプロパティが反応しないことがわかりました (メソッドが呼び出されますが、snackbar は表示されません)。私の理解では、Vue はCompositionBをComponentに注入していないため、 CompositionA内でCompositionBの別のインスタンスを実行しているだけです。私は何か間違ったことをしていますか？ここで適切な解決策は何ですか？

compositionA.js (not working):

import { useCompositionB } from '@/compositions/compositionB'
export const useAuth = (props, context) => {
  const login = async (credentials) => {
    const { show } = useCompositionB()
    try {
      return await loginWithEmailPassword(credentials)
      show({text: 'Welcome back!'})
    } catch (err) {
      show({text: 'Failed to login'})
    }
  }
  return { login }
}

前もって感謝します、