chore: comment another watch usage, timeout message box

src/components/Message.vue

@@ -11,7 +11,7 @@
 <script>
 // referenced on
 // https://github.com/vuejs/vue-next/blob/master/packages/sfc-playground/src/Message.vue
-import { computed, toRefs } from 'vue'
+import { computed, toRefs, watch } from 'vue'
 import { msg } from '../store.js'
 
 export default {
@@ -34,6 +34,14 @@ export default {
         background: color.value + '33'
       }
     })
+    watch(
+      () => msg.showMsg,
+      () => {
+        if (msg.showMsg) {
+          setTimeout(() => (msg.showMsg = false), 5000)
+        }
+      }
+    )
 
     return { message, color, style, msg }
   }

src/components/NavBar.vue

@@ -101,6 +101,7 @@ export default {
 
     const downloadProject = () => {
       if (store.code && Object.keys(store.code).length) {
+        msg.color = '#ff0000'
         if (!store.config.output_dir) {
           msg.showMsg = true
           msg.content = `Output directory is required. Please input in Loggers tab.`

src/store.js

@@ -93,6 +93,7 @@ export async function fetchTemplates(template) {
 
 // watch the store.config
 // if that changed, call the genCode function
+// same as watch(() => store.config, () => genCode(), { deep: true })
 watch(store.config, () => genCode())
 
 // ejs options