diff --git a/src/Bundle/ChillPersonBundle/Resources/public/mod/AccompanyingPeriod/setReferrer.js b/src/Bundle/ChillPersonBundle/Resources/public/mod/AccompanyingPeriod/setReferrer.js
index b06dba5b9..b73c0afea 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/mod/AccompanyingPeriod/setReferrer.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/mod/AccompanyingPeriod/setReferrer.js
@@ -2,25 +2,44 @@ import {createApp} from 'vue';
 import SetReferrer from 'ChillPersonAssets/vuejs/_components/AccompanyingPeriod/SetReferrer.vue';
 import {fetchResults} from 'ChillMainAssets/lib/api/apiMethods.js';
 
+/**
+ *
+ * To start this app, add this container into recordAction passed as argument to
+ *  `ChillPerson/AccompanyingPeriod/_list_item.html.twig`:
+ *
+ *  ```html+twig
+ *  {% if is_granted('CHILL_PERSON_ACCOMPANYING_PERIOD_UPDATE', period) %}
+ *  <li>
+ *  <span data-set-referrer-app="data-set-referrer-app" data-set-referrer-accompanying-period-id="{{ period.id }}"></span>
+ *  </li>
+ *  {% endif %}
+ *  ```
+ *
+ *  The app will update the referrer displayed into dedicated span
+ */
+
 document.querySelectorAll('[data-set-referrer-app]').forEach(function (el) {
   let
     periodId = Number.parseInt(el.dataset.setReferrerAccompanyingPeriodId);
 
   const url = `/api/1.0/person/accompanying-course/${periodId}/referrers-suggested.json`;
+
   fetchResults(url).then(suggested => {
+
     const app = createApp({
       components: {
         SetReferrer,
       },
       template:
-        '<set-referrer :suggested="this.suggested" :periodId="periodId" @referrerSet="onReferrerSet"></set-referrer>',
+        '<set-referrer :suggested="suggested" :periodId="periodId" @referrerSet="onReferrerSet"></set-referrer>',
       data() {
         return {
-          suggested, periodId,
+          periodId, suggested, original: suggested,
         }
       },
       methods: {
         onReferrerSet(ref) {
+
           const bloc = document.querySelector(`[data-accompanying-period-id="${this.periodId}"]`);
           if (bloc === null) {
             console.error('bloc not found');
@@ -37,6 +56,7 @@ document.querySelectorAll('[data-set-referrer-app]').forEach(function (el) {
           label.textContent = ref.text;
           label.classList.remove('chill-no-data-statement');
 
+          this.suggested = this.original.filter(user => user.id !== ref.id);
         }
       }
     });
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AccompanyingPeriod/SetReferrer.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AccompanyingPeriod/SetReferrer.vue
index 049dabff6..3d3675c73 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AccompanyingPeriod/SetReferrer.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AccompanyingPeriod/SetReferrer.vue
@@ -1,6 +1,6 @@
 <template>
-<ul class="list-suggest add-items" v-if="this.suggested.length > 0">
-  <li v-for="r in this.suggested" @click="setReferrer(r)"><span>{{ r.text }}</span></li>
+<ul class="list-suggest add-items" v-if="suggested.length > 0">
+  <li v-for="r in suggested" @click="setReferrer(r)"><span>{{ r.text }}</span></li>
 </ul>
 </template>
 
@@ -11,16 +11,23 @@ import {makeFetch} from 'ChillMainAssets/lib/api/apiMethods.js';
 export default {
   name: "SetReferrer",
   props: {
-    suggested: {
+   suggested: {
       type: Array,
       required: false,
-      default: [],
+      //default: [],
     },
     periodId: {
       type: Number,
       required: true
     }
   },
+  data() {
+    return {
+      /*suggested: [
+        {id: 5, text: 'Robert'}, {id: 8, text: 'Monique'},
+      ]*/
+    }
+  },
   emits: ['referrerSet'],
   methods: {
     setReferrer: function(ref) {
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingPeriod/_list_item.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingPeriod/_list_item.html.twig
index b53631e86..5f12f60f1 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingPeriod/_list_item.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingPeriod/_list_item.html.twig
@@ -1,4 +1,4 @@
-<div class="item-bloc accompanying-period-item{% if itemBlocClass is defined %} {{ itemBlocClass }}{% endif %}" {% if itemAttrs is defined %}{{ itemAttrs }}{% endif %}>
+<div class="item-bloc accompanying-period-item{% if itemBlocClass is defined %} {{ itemBlocClass|raw }}{% endif %}" data-accompanying-period-id="{{ period.id|e('html_attr') }}">
     <div class="item-row">
         <div class="wrap-header">
             <div class="wh-row">
@@ -43,6 +43,7 @@
                 </div>
                 <div class="wh-col">
                     {% if chill_accompanying_periods.fields.user == 'visible'  %}
+                        {# the tags `data-referrer-text` is used by module `@ChillPerson/mod/AccompanyingPeriod/setReferrer.js` #}
                         {% if period.user %}
                             <abbr class="referrer" title="{{ 'Referrer'|trans }}">{{ 'Referrer'|trans }}:</abbr>
                             <span data-referrer-text="data-referrer-text">{{ period.user|chill_entity_render_box }}</span>