Vue Js Multi Select Month Picker

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
  <div id="app">
    <h3>Vue js Multi select month picker</h3>
    <div class="chips">
      <div v-for="(month, index) in selectedMonths" :key="index" class="chip" @click="removeMonth(index)">
        {{ month }}
        <button class="remove-button" @click="removeMonth(index)">
          x
        </button>
      </div>
    </div>
    <input type="month" v-model="selectedMonth" @change="addMonth" />
  </div>

.chips {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 10px;
    }

.chip {
      display: flex;
      align-items: center;
      background-color: #f2f2f2;
      border-radius: 16px;
      padding: 8px 12px;
      margin-right: 8px;
      margin-bottom: 8px;
      cursor: pointer;
    }

.chip:hover {
      background-color: #e0e0e0;
    }

.remove-button {
      margin-left: 8px;
      background-color: transparent;
      border: none;
      cursor: pointer;
    }

input[type="month"] {
      padding: 8px;
      border: 1px solid #ccc;
      border-radius: 4px;
      outline-color: #00B0FF;
    }
  </style>
</body>

</html>