♻️ (music) change music var name

src/components/ZoneMusic.vue

@@ -2,23 +2,19 @@
   <div class="zone-music plume" v-if="isMusicAvailable">
     <div class="pm-field">
       <label for="use-music" data-pm-holder>
-        <span :class="{ selected: !withMusic, disabled: withMusic }"
-          >focus</span
-        >
+        <span :class="{ selected: !hasMusic, disabled: hasMusic }">focus</span>
         <input
           type="checkbox"
           name="use-music"
           id="use-music"
-          :checked="withMusic"
-          @change="setWithMusic(!withMusic)"
+          :checked="hasMusic"
+          @change="setHasMusic(!hasMusic)"
           data-pm-checkbox-toggle
         />
-        <span :class="{ selected: withMusic, disabled: !withMusic }"
-          >chill</span
-        >
+        <span :class="{ selected: hasMusic, disabled: !hasMusic }">chill</span>
       </label>
     </div>
-    <ChilledMusic v-if="withMusic" :play="play" @play="play" @pause="pause" />
+    <ChilledMusic v-if="hasMusic" :play="play" @play="play" @pause="pause" />
   </div>
 </template>
 
@@ -38,7 +34,7 @@ export default defineComponent({
     }
   },
   setup(_, { emit }) {
-    const { isMusicAvailable, withMusic, setWithMusic } = useMusic()
+    const { isMusicAvailable, hasMusic, setHasMusic } = useMusic()
 
     const play = () => {
       emit('play')
@@ -48,7 +44,7 @@ export default defineComponent({
       emit('pause')
     }
 
-    return { isMusicAvailable, withMusic, setWithMusic, play, pause }
+    return { isMusicAvailable, hasMusic, setHasMusic, play, pause }
   }
 })
 </script>