addpersons component, doesnt hear emitted event...

src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/App.vue

@@ -5,9 +5,6 @@
    <teleport to="#visgraph-legend">
       <div class="post-menu">
          <div class="list-group mt-4">
-            <button type="button" class="list-group-item list-group-item-action btn btn-create">
-               {{ $t('visgraph.add_person') }}
-            </button>
             <button type="button" class="list-group-item list-group-item-action btn btn-create" @click="createRelationship">
                {{ $t('visgraph.add_link') }}
             </button>
@@ -116,7 +113,16 @@
          </template>
       </modal>
    </teleport>
-
+   <div style="float: right;">
+      <add-persons
+         buttonTitle="visgraph.add_person"
+         modalTitle="visgraph.add_person"
+         v-bind:key="addPersons.key"
+         v-bind:options="addPersons.options"
+         @addNewPersons="addNewPersons"
+         ref="addPersons">
+      </add-persons>
+   </div>
 </template>
 
 <script>
@@ -127,12 +133,14 @@ import VueMultiselect from 'vue-multiselect'
 import { getRelationsList, postRelationship, patchRelationship, deleteRelationship } from "./api"
 import { splitId, getAge } from "./vis-network"
 import { visMessages } from "./i18n";
+import AddPersons from 'ChillPersonAssets/vuejs/_components/AddPersons.vue';
 
 export default {
    name: "App",
    components: {
       Modal,
-      VueMultiselect
+      VueMultiselect,
+      AddPersons
    },
    props: ['household_id'],
    data() {
@@ -162,8 +170,34 @@ export default {
          },
          canvas: null,
          link: null,
+         addPersons: {
+            key: 'filiation',
+            options: {
+               type: ['person'],
+               priority: null,
+               uniq: false,
+            }
+         }
       }
    },
+   methods: {
+      addNewPersons({ selected, modal }) {
+         console.log('@@@ CLICK button addNewPersons', selected);
+         // selected.forEach(function(item) {
+         //       this.$store.dispatch('addPerson', item)
+         //          .catch(({name, violations}) => {
+         //             if (name === 'ValidationException' || name === 'AccessException') {
+         //                violations.forEach((violation) => this.$toast.open({message: violation}));
+         //             } else {
+         //                this.$toast.open({message: violations})
+         //             }
+         //          });
+         //    }, this
+         // );
+         // this.$refs.addPersons.resetSearch(); // to cast child method
+         // modal.showModal = false;
+      },
+   },
    computed: {
       ...mapGetters(['nodes', 'edges',
          // not used 'isInWhitelist', 'isHouseholdLoading', 'isCourseLoaded', 'isRelationshipLoaded', 'isPersonLoaded', 'isExcludedNode', 'countLinksByNode', 'getParticipationsByCourse', 'getMembersByHousehold', 'getPersonsGroup',
@@ -238,6 +272,7 @@ export default {
       this.initGraph()
       this.listenOnGraph()
       this.getRelationsList()
+      console.log(this.persons);
 
       this.canvas = document.getElementById('visgraph').querySelector('canvas')
       this.link = document.getElementById('exportCanvasBtn')