injecting person data into renderbox, no styling yet

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated/ParticipationItem.vue

@@ -1,8 +1,12 @@
 <template>
 <tr>
    <td>
-      {{ participation.person.firstName }}
-      {{ participation.person.lastName }}
+      <!-- {{ participation.person.firstName }}
+      {{ participation.person.lastName }} -->
+      <person-render-box
+         v-bind:options="options"
+         v-bind:participation="participation"
+      ></person-render-box>
    </td>
    <td><span v-if="participation.startDate">
        {{ $d(participation.startDate.datetime, 'short') }}</span>
@@ -47,13 +51,28 @@
 
 <script>
 import OnTheFly from 'ChillMainAssets/vuejs/_components/OnTheFly.vue';
+import PersonRenderBox from '../../../_components/Entity/PersonRenderBox.vue';
 
 export default {
    name: 'ParticipationItem',
    components: {
-      OnTheFly
+      OnTheFly,
+      PersonRenderBox
    },
    props: ['participation'],
    emits: ['remove', 'close'],
+   data() {
+      return {
+         PersonRenderBox: {
+            participation : 'participation',
+            options : {
+               addInfo : true,
+               addId : true,
+               addAge : false,
+               hLevel : 1
+            }
+         }
+      }
+   }
 }
 </script>