createTournament.vue

<template>
  <div id="register-tournament">
    <input type="text" v-model="tournamentName"/>
    <button type="button" v-on:click="createTournament">Create Tournament</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data: function(){
    return {
      'tournamentName': '',
    }
  },
  methods: {
    createTournament: function(){
      axios.post("http://127.0.0.1:8000/api/tournaments/", {
        data: {
          "name": this.tournamentName
        },
        // headers:{
        //   'authorization': 'Basic YXR0aWxhOmFkaXR5YTEyMw=='      The encoded form was obtained using Postman(just for testing).
        // },
        auth: {
          username: 'username',
          password: 'password'
        }
      })
    } 
  }
  
}
</script>