move AccompanyingCourse component in his own directory

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

@@ -1,30 +1,18 @@
 <template>
-   <div class="vue-component">
+   <accompanying-course v-bind:accompanying_course="accompanying_course"/>
-      <h3>Parcours</h3>
-      <dl>
-         <dt>id</dt>
-            <dd>{{ accompanying_course.id }}</dd>
-         <dt>opening_date</dt>
-            <dd>{{ accompanying_course.opening_date }}</dd>
-         <dt>closing_date</dt>
-            <dd>{{ accompanying_course.closing_date }}</dd>
-         <dt>remark</dt>
-            <dd>{{ accompanying_course.remark }}</dd>
-         <dt>closing_motive</dt>
-            <dd>{{ accompanying_course.closing_motive }}</dd>
-      </dl>
-   </div>
    <persons-associated v-bind:persons_associated="accompanying_course.persons"/>
    <requestor v-bind:accompanying_course="accompanying_course"/>
 </template>
 
 <script>
+import AccompanyingCourse from './components/AccompanyingCourse.vue';
 import PersonsAssociated from './components/PersonsAssociated.vue';
 import Requestor from './components/Requestor.vue';
 
 export default {
-   name: 'AccompanyingCourse',
+   name: 'App',
    components: { 
+      AccompanyingCourse,
       PersonsAssociated, 
       Requestor
    },

src/Bundle/ChillPersonBundle/Resources/public/js/AccompanyingCourse/components/AccompanyingCourse.vue

@@ -0,0 +1,26 @@
+<template>
+   <div class="vue-component">
+      <h3>Parcours</h3>
+      <dl>
+         <dt>id</dt>
+            <dd>{{ accompanying_course.id }}</dd>
+         <dt>opening_date</dt>
+            <dd>{{ accompanying_course.opening_date }}</dd>
+         <dt>closing_date</dt>
+            <dd>{{ accompanying_course.closing_date }}</dd>
+         <dt>remark</dt>
+            <dd>{{ accompanying_course.remark }}</dd>
+         <dt>closing_motive</dt>
+            <dd>{{ accompanying_course.closing_motive }}</dd>
+      </dl>
+   </div>
+</template>
+
+<script>
+export default {
+   name: 'AccompanyingCourse',
+   props: {
+      accompanying_course: Object
+   }
+}
+</script>

src/Bundle/ChillPersonBundle/Resources/public/js/AccompanyingCourse/components/PersonItem.vue

@@ -16,7 +16,7 @@
 
 <script>
 export default {
-   name: 'PersonAction',
+   name: 'PersonItem',
    props: {
       person: { type: Object, required: true }
    },

src/Bundle/ChillPersonBundle/Resources/public/js/AccompanyingCourse/components/PersonsAssociated.vue

@@ -15,7 +15,11 @@
          </tr>
       </thead>
       <tbody> 
-         <person-action v-for="person in persons_associated" :key="person.id" :person="person" @remove="removePerson" />
+         <person-item 
+            v-for="person in persons_associated" 
+            v-bind:person="person" 
+            v-bind:key="person.id" 
+            @remove="removePerson" />
       </tbody>
    </table>
    
@@ -27,15 +31,20 @@
 </template>
 
 <script>
-import PersonAction from "./PersonAction.vue"
+import PersonItem from "./PersonItem.vue"
 
 export default {
    name: 'PersonsAssociated',
+   components: { 
+      PersonItem 
+   },
    props: { 
       persons_associated: Array 
    },
-   components: { 
+   data() {
-      PersonAction 
+      return {
+         persons: this.persons_associated
+      }
    },
    computed: {
       async counter() {

src/Bundle/ChillPersonBundle/Resources/public/js/AccompanyingCourse/components/Requestor.vue

@@ -10,11 +10,7 @@
 export default {
    name: 'Requestor',
    props: {
-      'accompanying_course': Object
+      accompanying_course: Object
-   },
-   computed: {
-   },
-   methods: {
    }
 }
 </script>

src/Bundle/ChillPersonBundle/Resources/public/js/AccompanyingCourse/index.js

@@ -0,0 +1,8 @@
+import App from './App.vue';
+import { createApp } from 'vue';
+
+const app = createApp({
+   template: `<app></app>`
+})
+.component('app', App)
+.mount('#accompanying-course');

src/Bundle/ChillPersonBundle/Resources/public/js/index.js

@@ -1,9 +0,0 @@
-import AccompanyingCourse from './AccompanyingCourse.vue';
-import { createApp } from 'vue';
-
-const app = createApp({
-   name: 'App',
-   template: `<accompanying-course></accompanying-course>`
-})
-.component('accompanying-course', AccompanyingCourse)
-.mount('#app');

src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/show.html.twig

@@ -8,7 +8,7 @@
 
    <h1>{{ block('title') }}</h1>
    
-   <div id="app"></div>    
+   <div id="accompanying-course"></div>    
 
    {{ encore_entry_script_tags('accompanying_course') }}
 

src/Bundle/ChillPersonBundle/chill.webpack.config.js

@@ -8,5 +8,5 @@ module.exports = function(encore, entries)
         ChillPersonAssets: __dirname + '/Resources/public'
     });
     
-    encore.addEntry('accompanying_course', __dirname + '/Resources/public/js/index.js');
+    encore.addEntry('accompanying_course', __dirname + '/Resources/public/js/AccompanyingCourse/index.js');
 };