How to detect and avoid circular dependencies in computed properties in Vue

Here is a simple example for a vue3 component that has got a circular dependency in computed properties:

<template>
  <p> </p>
</template>

<script>
export default {
  name: "Test",
  computed: {
    c1() {
      return this.c2;
    },
    c2() {
      return this.c1;
    }
  }
}
</script>

This results in an endless loop and the component is dysfunctional, the template is not being rendered. The point is that this problem can easily occur via longer loops involving several components communicating via emits and props, each having some computed properties. Maybe also some data in a vuex store is involved in the loop.

In other words, it can be very hard to spot such a problem in a complex application when some of your components don't work as expected (recently I had this problem, that's why I am posting the question). Many applications need to share data and state information between the components.

Are there any ideas on how to detect such problems systematically, e.g. using some tool, or, using specific component design patterns to avoid the problem as far as possible?