just a learn..Any suggestions?...thanks...

wordgame/src/App.vue

@@ -2,14 +2,13 @@
     <div id="app">
         <h1>Guess the {{ currentWord.length }}-letter word</h1>
         <h3 style="margin-bottom: 40px">Choose from the letters below</h3>
-
         <!-- A circular progress indicator -->
         <div class="progress-circle">
             <div class="pc-overlay">{{ progressPercent }}%</div>
             <div
                 class="pc-background"
                 :style="{
-          background: `conic-gradient(#ec826f ${degrees}deg, #ddd ${degrees}deg)`,
+                    background: `conic-gradient(#ec826f ${progressPercent * 3.6}deg, #ddd ${progressPercent * 3.6}deg)`,
                 }"
             ></div>
         </div>
@@ -27,7 +26,7 @@
                 class="word-display"
                 v-for="(l, i) in currentWord.split('')"
                 :key="i"
-        :value="getGuessedLetter(i)"
+                :value="getGuessedLetter[i]"
             />
         </div>
 
@@ -41,126 +40,97 @@
                 }"
             ></div>
             <button
-        :class="getLetterButtonClass(l)"
-        v-for="l in alphabets"
+                :class="getLetterButtonClass[l]"
+                v-for="(l) in alphabets"
                 :key="l"
                 :title="currentGuess.includes(l) ? `${l} already picked` : `Pick ${l}`"
                 :style="{ cursor: currentGuess.includes(l) ? 'default' : 'pointer' }"
                 @click="makeGuess(l)"
-      >
-        {{ l }}
-      </button>
+            >{{ l }}</button>
+        </div>
+        <div
+            v-if="puzzleSolved"
+        >{{ `Congratulations! You found the word ${currentWord} in ${tries} tries! Click on the button below to begin a new game.` }}</div>
+        <div>
+            <button id="new_game" @click="loadGame">New Game</button>
         </div>
-    <div>{{ message }}</div>
-    <div><button id="new_game" @click="loadGame">New Game</button></div>
         <div id="credits">
             <div>
                 Background Photo by
                 <a
                     target="_blank"
                     href="https://www.pexels.com/photo/date-arrow-calendar-time-5652114/"
-        >
-          Visual Tag Mx from Pexels
-        </a>
+                >Visual Tag Mx from Pexels</a>
             </div>
             <div>
                 Word list from
                 <a
                     target="_blank"
                     href="https://www.ef.com/wwen/english-resources/english-vocabulary/top-3000-words/"
-          >https://www.ef.com/wwen/english-resources/english-vocabulary/top-3000-words/</a
-        >
+                >https://www.ef.com/wwen/english-resources/english-vocabulary/top-3000-words/</a>
             </div>
         </div>
     </div>
 </template>
 
 <script>
 import Constants from "./Constants";
-
 export default {
     name: "WordGame",
 
     data() {
         return {
-      currentWord: "",
             currentGuess: [],
-      tries: 0,
-      progress: 0,
-      message: "",
+            currentWord: "",
+            alphabets: Constants.ALPHABETS.split("")
         };
     },
 
     mounted() {
-    this.loadGame();
+        this.loadGame()
     },
 
     computed: {
-    words() {
-      return Constants.WORD_LIST.split(",");
-    },
-
-    alphabets() {
-      return Constants.ALPHABETS.split("");
+        progress() {
+            return this.currentGuess.map(g => this.currentWord.split("").filter((e) => e === g).length).reduce((q, w) => q + w, 0)
         },
-
         progressPercent() {
             return Math.round((this.progress / this.currentWord.length) * 100);
         },
-
-    degrees() {
-      return Math.round((this.progress / this.currentWord.length) * 360);
-    },
-
         puzzleSolved() {
             return this.progress === this.currentWord.length;
         },
+        tries() {
+            return this.currentGuess.length
         },
-
-  methods: {
-    reset() {
-      this.currentWord = "";
-      this.currentGuess = [];
-      this.tries = 0;
-      this.progress = 0;
-      this.message = "";
-    },
-
-    loadGame() {
-      this.reset();
-
-      let rnd = Math.floor(Math.random() * this.words.length);
-      this.currentWord = this.words[rnd].toUpperCase();
-    },
-
-    getGuessedLetter(index) {
-      if (this.currentGuess.includes(this.currentWord[index])) {
-        return this.currentWord[index];
+        getGuessedLetter() {
+            return this.currentWord.split("").map((e) => {
+                if (this.currentGuess.includes(e)) {
+                    return e;
                 }
-
                 return "";
+            })
+        },
+        getLetterButtonClass() {
+            return this.alphabets.reduce((all, letter) => {
+                if (this.currentGuess.includes(letter)) all[letter] = "letter-button-disabled";
+                else all[letter] = "letter-button";
+                return all
+            }, {})
+        },
     },
 
-    getLetterButtonClass(letter) {
-      if (this.currentGuess.includes(letter)) return "letter-button-disabled";
+    methods: {
+        loadGame() {
+            this.currentGuess = [];
 
-      return "letter-button";
+            const word = Constants.WORD_LIST.split(",")
+            const rnd = Math.floor(Math.random() * word.length);
+            this.currentWord = word[rnd].toUpperCase();
         },
-
         makeGuess(letter) {
             if (this.currentGuess.includes(letter)) return;
             this.currentGuess.push(letter);
-      this.tries++;
-
-      // this.currentWord.split("") -> converts the string to an array
-      // then the array is filtered upon which of its elements matches the letter
-      // the length of the filtered array is how many characters were guessed correctly
-      this.progress += this.currentWord.split("").filter((e) => e === letter).length;
-
-      if (this.puzzleSolved) {
-        // solved
-        this.message = `Congratulations! You found the word ${this.currentWord} in ${this.tries} tries! Click on the button below to begin a new game.`;
-      }
         },
     },
 };