HTML Form Submitting On Button Click

Question

Clicking any button on the html form triggers a submit event. I am using vue 3's composition API to submit data to a backend on when the submit event is fired

import axios from 'axios'
import { ref } from 'vue'

export default {
   name: "CreateUser",
   
   setup() {
      let username = ref("")
      let password = ref("")
      let email = ref("")

      const submit() => {
         axios.post("api/users/", {
            'username': username.value,
            'email': email.value,
            'password': password.value
})
      }

      const doSomething = () => {}

      return {
         submit,
         username,
         password,
         email,
         doSomething,
      }
   }
}

<form @submit.prevent="submit">
  <label for="username">Username:</label>
  <input type="text" id="username" v-model="username"><br><br>

  <label for="email">Email</label>
  <input type="email" id="email" v-model="email"><br><br>  

  <button @click="doSomething">Do Something</button>

  <label for="password">Password</label>
  <input type="text" id="password" v-model="password"><br><br> 

  <input type="reset" value="Reset">
  <input type="submit" value="Submit">
</form>

The Do Something button also triggers a submit event. There are other input fields below the Do Something button. I am quite new to web development and find this quite confusing. The code added has been simplified. Any explanation would be greatly appreciated as I haven't found any explanation upon searching. Thank you