using vuejs recurrent components returns component not found - vuejs2

Question

I have create a test vue project using recurring components with single file components. I am getting an error that the component cmp2 is undefined even though it is defined in the file. Any help is welcome.
Here are the files:
-- main.js --
import Vue from 'vue'
import App from './App.vue'
new Vue({
name: 'main',
render: h => h(App)
}).$mount('#app')
-- App.vue --
<template>
<div id="app">
app
<cmp1 :show="true"/>
</div>
</template>
<script>
import cmp1 from './cmp1.vue'
export default {
name: 'app',
components: { cmp1 }
}
</script>
-- cmp1.vue --
<template>
<div>
in cmp1
<cmp2 v-if="show"/>
</div>
</template>
<script>
import cmp2 from './cmp2.vue'
export default {
name: 'cmp1',
props: ['show'],
components: {
cmp2
}
}
</script>
-- cmp2 --
<template>
<div>
in cmp2
<cmp1 />
</div>
</template>
<script>
import cmp1 from './cmp1.vue'
export default {
name: 'cmp2',
components: { cmp1 }
}
</script>
Now if I register the components in the main file, then everything works correctly:
-- main.js with registration --
import Vue from 'vue'
import App from './App.vue'
import cmp1 from './cmp1.vue'
import cmp2 from './cmp2.vue'
Vue.component('cmp1', cmp1)
Vue.component('cmp2', cmp2)
new Vue({
name: 'main',
render: h => h(App)
}).$mount('#app')
But I still don't understand why it would not work when I don't register the components globally. This has something to do with the recursive nature of the components but I don't know what I am doing wrong.
Thanks for the help !

Answer 1

That code is not correct ...
because you call a component in another component and that component call the first component you call and it cause the infinite loop to your app and there is no break point for that and vue stop that for happening because of that your code is not work properly...