diff --git a/src/Bundle/ChillMainBundle/chill.webpack.config.js b/src/Bundle/ChillMainBundle/chill.webpack.config.js
index 540900853..6187b31ea 100644
--- a/src/Bundle/ChillMainBundle/chill.webpack.config.js
+++ b/src/Bundle/ChillMainBundle/chill.webpack.config.js
@@ -56,7 +56,7 @@ module.exports = function(encore, entries)
     // Chill2 new assets
     encore.addEntry('forkawesome', __dirname + '/Resources/public/modules/forkawesome/index.js');
     encore.addEntry('bootstrap', __dirname + '/Resources/public/modules/bootstrap/index.js');
-    encore.addEntry('vuejs', __dirname + '/Resources/public/modules/vue/index.js');
+    //encore.addEntry('vuejs', __dirname + '/Resources/public/modules/vue/index.js');
 
     // CKEditor5
     buildCKEditor(encore);
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/js/AccompanyingCourse.vue b/src/Bundle/ChillPersonBundle/Resources/public/js/AccompanyingCourse.vue
index fbc7747db..1f8a7ba03 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/js/AccompanyingCourse.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/js/AccompanyingCourse.vue
@@ -14,6 +14,3 @@
       }
    }
 </script>
-
-<style>
-</style>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/js/components/PersonsAssociated.js b/src/Bundle/ChillPersonBundle/Resources/public/js/components/PersonsAssociated.js
new file mode 100644
index 000000000..e9891db80
--- /dev/null
+++ b/src/Bundle/ChillPersonBundle/Resources/public/js/components/PersonsAssociated.js
@@ -0,0 +1,35 @@
+
+    import Vue from 'vue'
+    import VueResource from 'vue-resource'
+
+    Vue.use(VueResource);
+
+    export default {
+        template: '#vue-usagers',
+        delimiters: ['${', '}'],
+        data () {
+            return {
+                persons_associated: []
+            };
+        },
+        http: {
+            root: 'http://localhost:8001/fr/api'
+        },
+        methods: {
+            addPerson(){
+                this.persons_associated.persons.push({"firstname": "Lisa", "lastname": "Simpson", "startdate": "1975-09-15", "enddate": "2021-04-20" })
+            }
+        },
+        computed: {
+            counter() {
+                return this.persons_associated.persons.length;
+            }
+        },
+        created() {
+            this.$resource('parcours/270/show').get().then((response) => {
+                this.persons_associated = response.data
+            }, (response) => {
+                console.log('erreur', response);
+            });
+        }
+    };
\ No newline at end of file
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/js/components/PersonsAssociated.vue b/src/Bundle/ChillPersonBundle/Resources/public/js/components/PersonsAssociated.vue
index d2c29b82e..c6e0cb9d8 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/js/components/PersonsAssociated.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/js/components/PersonsAssociated.vue
@@ -1,60 +1,12 @@
-<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>remark</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>
 
-<script>
     import Vue from 'vue'
     import VueResource from 'vue-resource'
 
     Vue.use(VueResource)
 
-    export default{
+    export default {
+        template: '#vue-usagers',
+        delimiters: ['${', '}'],
         data () {
             return {
                 persons_associated: []
@@ -74,15 +26,12 @@
             }
         },
         created() {
-            this.$resource('parcours/861/show').get().then((response) => {
+            this.$resource('parcours/270/show').get().then((response) => {
                 this.persons_associated = response.data
             }, (response) => {
                 console.log('erreur', response);
             })
         }
     }
-</script>
 
-<style>
-</style>
 
diff --git a/src/Bundle/ChillMainBundle/Resources/public/modules/vue/index.js b/src/Bundle/ChillPersonBundle/Resources/public/js/index.js
similarity index 52%
rename from src/Bundle/ChillMainBundle/Resources/public/modules/vue/index.js
rename to src/Bundle/ChillPersonBundle/Resources/public/js/index.js
index f631d1d0b..8602629a2 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/modules/vue/index.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/js/index.js
@@ -1,7 +1,7 @@
 import Vue from 'vue'
-import App from 'ChillPersonAssets/js/AccompanyingCourse.vue'
+import App from './AccompanyingCourse.vue'
 
 new Vue({
     el: '#app',
     render: h => h(App)
-})
+});
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/show.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/show.html.twig
index 08c3b2b40..0d6c926a9 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/show.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/show.html.twig
@@ -25,7 +25,64 @@ usagers:
     {% verbatim %}{% endverbatim %}
 #}
 
-    <div id="app" data-name="{{ accompanyingCourse.id }}"></div>
-    {{ encore_entry_script_tags('vuejs') }}
+    <div id="app" course-id="{{ accompanyingCourse.id }}"></div>
+    
+<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>
+    {{ encore_entry_script_tags('accompanying_course') }}
 
 {% endblock %}
diff --git a/src/Bundle/ChillPersonBundle/chill.webpack.config.js b/src/Bundle/ChillPersonBundle/chill.webpack.config.js
index b1957108f..87b6b25f0 100644
--- a/src/Bundle/ChillPersonBundle/chill.webpack.config.js
+++ b/src/Bundle/ChillPersonBundle/chill.webpack.config.js
@@ -7,4 +7,7 @@ module.exports = function(encore, entries)
     encore.addAliases({
         ChillPersonAssets: __dirname + '/Resources/public'
     });
+    
+    encore.addEntry('accompanying_course', __dirname + '/Resources/public/js/index.js');
+
 };