Problem with Recursive Components in Vue.js - vue.js

Question

I'm a beginner in Vue.js and I'm getting stuck on using recursive components.
When I try to recall the GroupFilter component in the GroupFilter component, the test message "New filter group" is displayed fine, but not the new GroupFilter component.
I have tried using an import and using the name given to the component, but in both cases it does not work.
Does anyone know how to make this work ? Thank you in advance for your help !
<template>
<div class="groupFilter">
<p>OR</p>
<div class='groupFilterForms'>
<div class="selectButton">
<button type="button" class="btn btn-primary" v-on:click="addNewFilter">+ Add Filter</button>
<button type="button" class="btn btn-success" v-on:click="addNewGroupFliter">+ Add Filter Group</button>
</div>
<div v-for="(child, index) in this.$store.state.storeData[this.index].$all" :index="index" :key="index">
<div v-if="child.condition">
<FilterTemplate :index='index'/>
</div>
<div v-else-if="child.$all">
<h3>New filter group</h3>
<GroupFilter/>
</div>
</div>
</div>
</div>
</template>
<script>
import FilterTemplate from'./FilterTemplate';
import GroupFilter from './GroupFilterTemplate'
export default {
name: 'GroupFilter',
components: {
FilterTemplate,
GroupFilter
},
data: function (){
return {
storeData: [],
props: this.index,
toto: Array
}
},
props: ['index'],
mounted: function(){
this.storeData = this.$store.state.storeData
},
methods: {
addNewFilter(){
console.log("new filter TEST")
this.storeData[this.props].$all.push(
{condition:{
"attr":"group_id",
"ope":"eq",
"value":106
}}
);
this.$store.commit('setStoreData', this.storeData);
console.log(this.storeData[index])
},
addNewGroupFliter(){
console.log("new group filter TEST")
this.storeData[this.props].$all.push({
$all:[
{condition:{
"attr":"group_id",
"ope":"eq",
"value":106
}}
]
})
this.$store.commit('setStoreData', this.storeData);
}
}
}
</script>