Vue Js post checkbox data to API

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/vue@3.2.12/dist/vue.global.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  </head>

<body>
    <div id="app">
      <div class="container">
        <h3>Vue js post checkbox data to API</h3>
        <form @submit="handleSubmit">
          <div v-for="river in rivers" :key="river.id">
            <label>
              <input
                type="checkbox"
                :value="river.name"
                :checked="selectedRivers.includes(river.name)"
                @change="handleCheckboxChange"
              />
              {{ river.name }}
            </label>
          </div>
          <button type="submit">Submit</button>
        </form>
      </div>
    </div>

app.mount("#app");
    </script>

/* CSS for the heading */
      h3 {
        font-size: 24px;
        margin-bottom: 20px;
      }

/* CSS for the form */
      form {
        margin-bottom: 20px;
      }

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

/* CSS for the checkbox */
      input[type="checkbox"] {
        margin-right: 10px;
      }

/* CSS for the submit button */
      button[type="submit"] {
        display: block;
        width: 100%;
        padding: 10px;
        background-color: #4caf50;
        color: #fff;
        border: none;
        border-radius: 5px;
        font-size: 16px;
        cursor: pointer;
      }

/* CSS for the submit button on hover */
      button[type="submit"]:hover {
        background-color: #45a049;
      }
    </style>
  </body>
</html>