Vue Js encryption decryption String using crypto js

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/crypto-js.min.js"></script>
</head>
<body>
  <div id="app">
    <h3>Vue Js Decrypt string</h3>
    <input v-model="encryptedString" placeholder="Encrypted String" />
    <input v-model="secretKey" placeholder="Secret Key" />
    <button @click="decryptString">Decrypt</button>
    <div>{{ decryptedString }}</div>
  </div>
  <script type="module">
    const app = new Vue({
      el: "#app",
      data() {
        return {
          encryptedString: 'U2FsdGVkX1+hd0eEadiYr+Y0FVwPo+Dj/do2mutf1Ck=',
          secretKey: 'mySecretKey',
          decryptedString: '',
        };
      },
      methods: {
        decryptString() {
          const decryptedBytes = CryptoJS.AES.decrypt(
            this.encryptedString,
            this.secretKey
          );
          this.decryptedString = decryptedBytes.toString(CryptoJS.enc.Utf8);
        },
      },
    });
  </script>
  <style scoped>
    #app {
      text-align: center;
      margin: 20px;
    }

input {
      padding: 10px;
      margin-bottom: 10px;
      width: 300px;
      border: 1px solid #ccc;
      border-radius: 4px;
      transition: border-color 0.3s ease;
    }

input:focus {
      outline: none;
      border-color: #4CAF50;
      box-shadow: 0 0 5px rgba(76, 175, 80, 0.6);
    }

button {
      padding: 10px 20px;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

button:hover {
      background-color: #45a049;
    }

div {
      margin-top: 20px;
      font-size: 18px;
      font-weight: bold;
      color: #4CAF50;

}
  </style>

</body>

</html>