changed all files to composition API

components/server/InstanceChecklist.vue

@@ -30,27 +30,24 @@
                 <td
                     :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Comments-darkmode' : 'Comments-lightmode']">
                     ...</td>
-                <td :class="['Done', darkMode ? 'td-darkmode' : 'td-lightmode']"><input type="checkbox" :class="[darkMode ? 'checkbox-darkmode' : 'checkbox-lightmode']"/></td>
+                <td :class="['Done', darkMode ? 'td-darkmode' : 'td-lightmode']"><input type="checkbox"
+                        :class="[darkMode ? 'checkbox-darkmode' : 'checkbox-lightmode']" /></td>
             </tr>
         </table>
     </div>
 </template>
   
-  
-  
-<script>
+<script setup>
+import { ref } from 'vue';
 
+const darkMode = ref(true)
+</script>
+
+<script>
 export default {
     name: "InstanceChecklist",
-    data() {
-        return {
-            darkMode: true,
-        };
-    },
-}
-
-</script>
-  
+};
+</script>  
     
     
     
@@ -211,4 +208,5 @@ th {
 
 .label-lightmode {
     color: #000;
-}</style>
+}
+</style>