registerTournament.vue

<template>
  <div id="register-tournament">
    <input type="text" v-model="tournamentName"/>
    <button type="button" v-on:click="createTournament">Create Tournament</button>
    <div id="tournament-created" v-if="createdTournamentName">
      <p>{{ createdTournamentName }} has been created</p>
      <router-link to='/register-players'><button type="button">Proceed to add players >> </button></router-link>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'registerTournament',
  data: function(){
    return {
      tournamentName: ''
    }
  },
  computed: {
    createdTournamentName: function(){
      return this.$store.state.currentTournament.name;
    }
  },
  methods: {
    createTournament: function(){
      this.$store.dispatch('createTournament', this.tournamentName)
    } 
  }
  
}
</script>