App.vue

<template>
  <div>
    <comp-a level="1"></comp-a>
  </div>
</template>

<script>
import CompA from './components/CompA'

export default {
  components: {
    CompA
  }
}
</script>

CompA.vue

<template>
  <div>
    A to B {{level}}
    <comp-b :level="level+1"></comp-b>
  </div>
</template>

<script>
import CompB from './CompB'

export default {
  props: ['level'],
  components: {
    CompB
  }
}
</script>

CompB.vue

<template>
  <div>
    B to C {{level}}
    <div v-if="level<11111111">
      <comp-c :level="level+1"></comp-c>
    </div>
  </div>
</template>

<script>
import CompC from './CompC'

export default {
  props: ['level'],
  components: {
    CompC
  }
}
</script>

CompC.vue

<template>
  <div>
    C to A {{level}}
    <comp-a :level="level+1"></comp-a>
  </div>
</template>

<script>
import CompA from './CompA'

export default {
  props: ['level'],
  components: {
    CompA
  }
}
</script>

Expectation

Expected output:
A to B 1
B to C 11
C to A 111
A to B 1111
B to C 11111
C to A 111111
A to B 1111111
B to C 11111111
C to A 111111111

Actual output:
A to B 1
B to C 11
C to A 111

And console: [Vue warn]: Attribute ":level" is ignored on component <comp-a> because the component is a fragment instance: