Связь между компонентами в Vue

Question

Мне интересно, как должно выглядеть общение между компонентами. Есть ли какие-нибудь передовые практики или рекомендации, на которых нам следует сосредоточиться?

Но начнем с того, почему я задаю этот вопрос:

Существует простой способ создать бесконечный цикл создания составных компонентов. Допустим, у нас есть 2 составных объекта.

useOrder

      import { useOrder } from "../userOrder/index";
const userId = ref("1");

export function useUser() {
  const { orderId } = useOrder();
  console.log("orderId", orderId);

  return {
    userId
  };
}

useUser

      import { useUser } from "../useUser/index";

const orderId = ref("2222");
export function useOrder() {
  const { userId } = useUser();
  console.log("userId", userId);
  return {
    orderId
  };
}

useOrder nedds useUser и useUser нуждаются в useOrder

Таким образом, в этом случае всякий раз, когда мы создаем экземпляр useOrder или useUser, будет бесконечный цикл, и приложение выйдет из строя

В этой ситуации у меня возник вопрос: должны ли компоненты напрямую связываться друг с другом?

Конечно, мы можем использовать Vuex или другую систему управления состоянием, но мне интересно ваше мнение.