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 Compress string </h2>
    <input type="text" v-model="inputString" placeholder="Enter a string">
    <button @click="compressString">Compress</button>
    <p>Original String: {{ inputString }}</p>
    <p v-if="compressedString">Compressed String: {{ compressedString }}</p>
    <p v-else>No compressed string available.</p>
  </div>
  <script type="module">
    const app = new Vue({
      el: "#app",
      data: {
        inputString: "aabbcc",
        compressedString: "",
      },
      methods: {
        compressString() {
          if (!this.inputString) {
            this.compressedString = "";
            return;
          }

let compressed = "";
          let count = 1;

for (let i = 0; i < this.inputString.length; i++) {
            if (this.inputString[i] === this.inputString[i + 1]) {
              count++;
            } else {
              compressed += this.inputString[i];
              if (count > 1) {
                compressed += count;
              }
              count = 1;
            }
          }

this.compressedString = compressed;
        },
      },
    });
  </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>
  </style>

</body>

</html>