Vue Js generate all possible permutations of a string

<!DOCTYPE html>
<html lang="en">

<body>
  <div id="app">
    <h3>Vue js generate all possible permutations of a string</h3>
    <div>
      <label for="inputString">Input String:</label>
      <input type="text" id="inputString" v-model="inputString" />
      <button @click="generatePermutations">Generate Permutations</button>
      <small v-if="permutations.length>0">Total number permutation:{{permutations.length}}</small>
    </div>
    <ul>
      <li v-for="permutation in permutations" :key="permutation">{{ permutation }}</li>
    </ul>
  </div>
  <script type="module">
    const app = new Vue({
      el: "#app",
      data() {
        return {
          inputString: 'ABC',
          permutations: [],
        };
      },
      methods: {
        generatePermutations() {
          const chars = this.inputString.split('');
          this.permutations = [];
          this.permute(chars, 0, chars.length - 1);
        },
        permute(chars, left, right) {
          if (left === right) {
            this.permutations.push(chars.join(''));
          } else {
            for (let i = left; i <= right; i++) {
              this.swap(chars, left, i);
              this.permute(chars, left + 1, right);
              this.swap(chars, left, i); // backtrack
            }
          }
        },
        swap(chars, i, j) {
          const temp = chars[i];
          chars[i] = chars[j];
          chars[j] = temp;
        },
      },
    });
  </script>
  <style scoped>
    /* Style for the container */
    #app {
      font-family: Arial, sans-serif;
      max-width: 500px;
      margin: 0 auto;
      padding: 20px;
    }

/* Style for the heading */
    h3 {
      color: #333;
      font-size: 20px;
      margin-bottom: 20px;
    }

/* Style for the label */
    label {
      display: block;
      margin-bottom: 10px;
    }

/* Style for the input field */
    input[type="text"] {
      width: 100%;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;
      margin-bottom: 10px;
    }

/* Style for the button */
    button {
      background-color: #4caf50;
      color: white;
      padding: 10px 15px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }

/* Style for the small text */
    small {
      display: block;
      margin-top: 10px;
    }

/* Style for the list */
    ul {
      margin-top: 20px;
      padding-left: 0;
    }

/* Style for the list items */
    li {
      margin-bottom: 5px;
    }
  </style>

</body>

</html>