Vue Js Get Multiple Checkbox Value onclick Button

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

<head>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>

<body>
  <div id="app">
    <form @submit.prevent="handleSubmit">
      <label v-for="option in options" :key="option.value">
        <input type="checkbox" :value="option.value" v-model="checkboxes" />
        {{ option.label }}
      </label>
      <button type="submit">Submit</button>
    </form>
    <p v-if="selectedValues">Selected values: {{ selectedValues }}</p>
  </div>

<script type="module">
    const app = new Vue({
      el: "#app",
      data: {
        checkboxes: [],
        selectedValues: '',
        options: [
          { label: 'X', value: 'X' },
          { label: 'OpenAi', value: 'OpenAI' },
          { label: 'SchoolsGeek', value: 'SchoolsGeek' },
        ],
      },
      methods: {
        handleSubmit() {
          this.selectedValues = this.checkboxes.join(',');
        },
      },
    });
  </script>

<style scoped>
    #app {
      margin: 0 auto;
      width: 500px;
      text-align: center;
      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24);
      padding: 20px;
    }
  </style>
</body>

</html>