add reactives social issues in banner

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

@@ -28,15 +28,14 @@ import Confirm from './components/Confirm.vue';
 export default {
    name: 'App',
    components: { 
-      //Banner,
+      Banner,
-      //StickyNav,
+      PersonsAssociated, 
-      //PersonsAssociated, 
+      Requestor,
-      //Requestor,
       SocialIssue,
-      //Referrer, // fait foirer socialissues
+      //Referrer,  //fait foirer socialissues
-      //Resources,
+      Resources,
-      //Comment,
+      Comment,
-      //Confirm,
+      Confirm,
    },
    computed: mapState([
       'accompanyingCourse', 'socialIssueOptions'

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner.vue

@@ -45,20 +45,26 @@
    </teleport>
    
    <teleport to="#header-accompanying_course-details #banner-social-issues">
-      <div class="grid-4">{{ $t('social_issue.title') }}</div>
+      <div class="grid-12">
-      <div class="grid-4">_</div>
+         <social-issues
-      <div class="grid-4">_</div>
+            v-for="issue in accompanyingCourse.socialIssues"
+            v-bind:key="issue.id"
+            v-bind:issue="issue">
+         </social-issues>
+      </div>
    </teleport>
 
 </template>
 
 <script>
 import ToggleFlags from './ToggleFlags';
+import SocialIssues from './Banner/SocialIssues.vue';
 
 export default {
    name: 'Banner',
    components: {
-      ToggleFlags
+      ToggleFlags,
+      SocialIssues
    },
    computed: {
       accompanyingCourse() {

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner/SocialIssues.vue

@@ -0,0 +1,16 @@
+<template>
+  <span class="badge badge-secondary">{{ issue.text }}</span>
+</template>
+
+<script>
+export default {
+   name: "SocialIssues",
+   props: ['issue']
+}
+</script>
+
+<style lang="scss">
+span.badge {
+   margin-right: 1em;
+}
+</style>