preventDefault is stopping checkboxes

I have a form with some checkboxes.
If I use submit.prevent it stop the page reloading which is great.
But it also stops the checkboxes from being checked.
Removing the prevent gives me back the checkbox functionality but now the page reloads when I don’t want it to.
Is there a way around this.

  <form @click="handleSubmit">

    <div class="form-group" v-for="skill in skills" :key="skill">

      <div class="form-group row" >

        <div class="col-sm-2">{{skill}}</div>

        <div class="col-sm-10">

          <div class="form-check">

            <input 

              class="form-check-input" 

              v-model="checkedSkills" 

              type="checkbox" :id="skill" 

              :value="skill"

            />

            <label class="form-check-label" :for="skill"></label>
          </div>
        </div>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</template>