♻️ (dev session) renaming component

src/views/Home.vue

@@ -6,19 +6,19 @@
       @update="(int) => (interval = int)"
     />
     <section class="developers">
-      <DreamMaker
+      <DevSession
         position="1"
         :is-turn="isProgrammer1Turn"
         :session="session"
       />
-      <DreamMaker
+      <DevSession
         position="2"
         :is-turn="!isProgrammer1Turn"
         :session="session"
       />
     </section>
     <div class="global-time">{{ time }}</div>
-    <div class="actions">
+    <div class="actions" v-if="ready">
       <button v-show="timeState === 'stopped'" @click="start">commencer</button>
       <button v-show="timeState === 'started'" @click="clear">arrêter</button>
     </div>
@@ -27,20 +27,27 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, onUnmounted } from '@vue/composition-api'
+import {
+  defineComponent,
+  onUnmounted,
+  ref,
+  onMounted
+} from '@vue/composition-api'
 import { useTimer } from '@/hooks/useTimer'
-import DreamMaker from '@/components/DreamMaker.vue'
+import DevSession from '@/components/DevSession.vue'
 import ChilledMusic from '@/components/ChilledMusic.vue'
 import IntervalInput from '@/components/IntervalInput.vue'
 
 export default defineComponent({
   name: 'Home',
   components: {
-    DreamMaker,
+    DevSession,
     ChilledMusic,
     IntervalInput
   },
   setup() {
+    const ready = ref(false)
+
     const {
       interval,
       start,
@@ -53,6 +60,10 @@ export default defineComponent({
 
     onUnmounted(clear)
 
+    onMounted(() => {
+      ready.value = true
+    })
+
     return {
       interval,
       start,
@@ -60,7 +71,8 @@ export default defineComponent({
       timeState,
       time,
       session,
-      isProgrammer1Turn
+      isProgrammer1Turn,
+      ready
     }
   }
 })