Vue Js Compress Decompress string

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <h2>Vue Js String Decompression</h2>
    <input type="text" v-model="compressedString" placeholder="Enter compressed string">
    <button @click="decompress">Decompress</button>
    <p>Decompressed string: {{ decompressedString }}</p>
  </div>
  <script type="module">
    const app = new Vue({
      el: "#app",
      data: {
        compressedString: 'a2b2c2',
        decompressedString: ''
      },
      methods: {
        decompress() {
          const regex = /([a-z])(\d+)/g;
          this.decompressedString = this.compressedString.replace(regex, (_, char, count) => {
            return char.repeat(parseInt(count));
          });
        }
      }
    });
  </script>
  <style scoped>
    #app {
      text-align: center;
      margin-top: 20px;
    }

h2 {
      color: #333;
    }

input[type="text"] {
      padding: 5px;
      width: 200px;
      margin-bottom: 10px;
    }

button {
      padding: 5px 10px;
      background-color: #007bff;
      color: #fff;
      border: none;
      cursor: pointer;
    }

button:hover {
      background-color: #0056b3;
    }

p {
      margin: 10px 0;
    }
  </style>

</body>

</html>