diff --git a/src/Bundle/ChillPersonBundle/Resources/public/js/AccompanyingCourse.js b/src/Bundle/ChillPersonBundle/Resources/public/js/AccompanyingCourse.js
new file mode 100644
index 000000000..70ae23168
--- /dev/null
+++ b/src/Bundle/ChillPersonBundle/Resources/public/js/AccompanyingCourse.js
@@ -0,0 +1,20 @@
+
+import Vue from 'vue';
+
+const AccompanyingCourseComponent = {
+  data() {
+    return {
+        id: 7,
+        persons_associated: []
+    };
+  },
+};
+
+let app = Vue.CreateApp({
+  delimiters: ['${', '}']
+})
+  .component(AccompanyingCourseComponent)
+;
+
+
+app.mount('#app');
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/js/AccompanyingCourse.vue b/src/Bundle/ChillPersonBundle/Resources/public/js/AccompanyingCourse.vue
index 1f8a7ba03..4a1bc5a5c 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/js/AccompanyingCourse.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/js/AccompanyingCourse.vue
@@ -1,16 +1,105 @@
 <template>
-   <div id="app">
-      <persons_associated></persons_associated>
-   </div>
+    <div id="kkk">
+        <h3>Usagers concernés</h3>
+        <dl>
+            <dt>id</dt>
+                <dd>{{ course.id }}</dd>
+            <dt>opening_date</dt>
+                <dd>{{ course.opening_date }}</dd>
+            <dt>closing_date</dt>
+                <dd>{{ course.closing_date }}</dd>
+            <dt>remarkzzzzz</dt>
+                <dd>{{ course.remark }}</dd>
+            <dt>closing_motive</dt>
+                <dd>{{ course.closing_motive }}</dd>
+        </dl>
+        <label>{{counter}} usagers concernés</label>
+        <table class="rounded">
+            <thead>
+                <tr>
+                    <th class="chill-orange">firstname</th>
+                    <th class="chill-orange">lastname</th>
+                    <th class="chill-orange">startdate</th>
+                    <th class="chill-orange">enddate</th>
+                    <th class="chill-orange">actions</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr v-for="person in course.persons">
+                    <td>{{ person.firstname }}</td>
+                    <td>{{ person.lastname }}</td>
+                    <td>{{ person.startdate }}</td>
+                    <td>{{ person.enddate }}</td>
+                    <td>
+                      <ul class="record_actions">
+                        <li><a class="sc-button bt-show"></a></li>
+                        <li><a class="sc-button bt-update"></a></li>
+                        <li><a class="sc-button bt-delete"></a></li>
+                      </ul>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+        <ul class="record_actions">
+            <li>
+                <button class="sc-button bt-create" @click="addPerson">Add Person</button>
+            </li>
+        </ul>
+    </div>
 </template>
 
 <script>
-   import persons_associated from './components/PersonsAssociated.vue'
+   import { createApp } from 'vue';
 
-   export default {
-      name: 'app',
-      components: {
-         persons_associated,
+   const App = {
+      name: 'AppAccompanyingCourse',
+      //delimiters: ['${', '}'], works only for template "in browser", not for template in vue files
+      data() {
+        return { course: 
+          {
+            id: 50,
+            opening_date: null,
+            closing_date: null,
+            remark: 'bim',
+            closing_motive: 'bam',
+            counter: 0,
+            persons: [] 
+          }
+        };
+      },
+      computed: {
+        courseId() {
+          return window.courseId;
+        } 
+      },
+      async mounted() {
+          console.log('mounted');
+          console.log(this.data);
+          console.log(this.courseId);
+          await this.getCourse();
+          console.log(this.data);
+          console.log('mounted stop');
+      },
+      methods: {
+        async getCourse() {
+          console.log('get course start');
+          console.log(this);
+          courseId = this.courseId;
+          let data_;
+          return fetch(`/fr/api/parcours/${courseId}/show`)
+            .then(response => response.json())
+            .then(data => {
+              console.log(data);
+              console.log(this);
+              this.$data.course = data;
+              console.log(this.data);
+              console.log('get course finish');
+          });
+        }
       }
-   }
+   };
+ 
+   export default App;
 </script>
+
+<style></style>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/js/index.js b/src/Bundle/ChillPersonBundle/Resources/public/js/index.js
index 8602629a2..bdcdfe6a8 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/js/index.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/js/index.js
@@ -1,7 +1,10 @@
-import Vue from 'vue'
-import App from './AccompanyingCourse.vue'
+import AccompanyingCourseComponent from './AccompanyingCourse.vue';
+import { createApp } from 'vue';
 
-new Vue({
-    el: '#app',
-    render: h => h(App)
-});
+
+const app = createApp({
+    name: 'AccCourseGlobal',
+    template: '<div class="abcde"><accompanying-course></accompanying-course></div>',
+})
+.component('accompanying-course', AccompanyingCourseComponent)
+.mount('#app');
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/show.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/show.html.twig
index 0d6c926a9..4b6321998 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/show.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/show.html.twig
@@ -8,81 +8,14 @@
 
     <h1>{{ block('title') }}</h1>
 
-{#
-    <pre>
-{{ accompanyingCourse.id }}
-{{ accompanyingCourse.openingDate|format_date('short') }}
-{{ accompanyingCourse.closingDate|format_date('short') }}
-{{ accompanyingCourse.closingMotive|chill_entity_render_box }}
-{{ accompanyingCourse.remark|raw }}
-{{ accompanyingCourse.user }}
-usagers:
-{% for p in accompanyingCourse.participations %}
-    {{ p.person.id }} | <a href="{{ path('chill_person_accompanying_period_list', { person_id: p.person.id }) }}">{{ p.person.fullnamecanonical }}</a> | {{ p.startdate|format_date('short') }} | {{ p.enddate|format_date('short') }}
-{% endfor %}
-    </pre>
-    {{ dump() }}
-    {% verbatim %}{% endverbatim %}
-#}
-
-    <div id="app" course-id="{{ accompanyingCourse.id }}"></div>
+  <script type="text/javascript">
+    window.courseId = {{ accompanyingCourse.id|e('js') }};
+    console.log(window.courseId);
+  </script>
+  
     
-<template id="accompanying" type="text/x-template">
-   <div class="vue-component">
-      <persons_associated></persons_associated>
-   </div>
-</template>
-    
-<template id="vue-usagers" type="text/x-template">
-    <div class="vue-component">
-        <h3>Usagers concernés</h3>
-        <dl>
-            <dt>id</dt>
-                <dd>${ persons_associated.id }</dd>
-            <dt>opening_date</dt>
-                <dd>${ persons_associated.opening_date }</dd>
-            <dt>closing_date</dt>
-                <dd>${ persons_associated.closing_date }</dd>
-            <dt>remarkzzzzz</dt>
-                <dd>${ persons_associated.remark }</dd>
-            <dt>closing_motive</dt>
-                <dd>${ persons_associated.closing_motive }</dd>
-        </dl>
-        <label>${counter} usagers concernés</label>
-        <table class="rounded">
-            <thead>
-                <tr>
-                    <th class="chill-orange">firstname</th>
-                    <th class="chill-orange">lastname</th>
-                    <th class="chill-orange">startdate</th>
-                    <th class="chill-orange">enddate</th>
-                    <th class="chill-orange">actions</th>
-                </tr>
-            </thead>
-            <tbody>
-                <tr v-for="person in persons_associated.persons">
-                    <td>${ person.firstname }</td>
-                    <td>${ person.lastname }</td>
-                    <td>${ person.startdate }</td>
-                    <td>${ person.enddate }</td>
-                    <td>
-                      <ul class="record_actions">
-                        <li><a class="sc-button bt-show"></a></li>
-                        <li><a class="sc-button bt-update"></a></li>
-                        <li><a class="sc-button bt-delete"></a></li>
-                      </ul>
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-        <ul class="record_actions">
-            <li>
-                <button class="sc-button bt-create" @click="addPerson">Add Person</button>
-            </li>
-        </ul>
-    </div>
-        
-</template>
+    <div id="app"></div>    
+      
     {{ encore_entry_script_tags('accompanying_course') }}
 
 {% endblock %}