Make counter distribute points according to team in Vuejs

I’m currently working on a Vue.js 3 school assignment, in which there is a dynamic number of teams competing in a football championship, with their data stored in a json, which is called by an API. We have to select 2 of them, one being a house team, and the other being the visitor team, to compete against each other and then choose one of these 2 to score a point and display in the scoreboard accordingly. The counter is store in a store with vuex. My problem is that I can’t figure out how to make the counter give the points to each team accordingly. I tried an inf – else structure, but it gives points to both teams at once. I don’t really understand how can I pass the parameters correctly, so I appreciate any help on the matter.

My code up until now:

store.js

import {createStore} from 'vuex'
import axios from 'axios'

const store = createStore({
  state() { 
    return {
      teams: [],
      house_points: 0,
      visitor_poins: 0,
    }
  },
  getters: {
    total_house: state => state.house_points,
    total_visitor: state => state.visitor_poins
  },
  mutations: {
    load_team(state, teams){
      state.teams = teams
    },
    count_house_points (state) {
      state.house_points++
    },
    count_visitor_points (state) {
      state.visitor_poins++
    },
  },
  actions: {
    load({commit}) {
      axios.get('http://localhost:3000/teams').then(({data}) => {
        commit('load_team', data)
      })
    },
    count_house_points ({commit}) {
      commit('count_house_points')
      axios.get('http://localhost:3000/points').then(({data}) => {
        commit('count_house_points', data)
      })
    },
    count_visitor_points ({commit}) {
      commit('count_visitor_points')
      axios.get('http://localhost:3000/points').then(({data}) => {
        commit('count_visitor_points', data)
      })
    },
    
  }
})

The application:

<template>

  <label class="form-label">House Team</label>
  <select class="form-control" v-model="match.house_team">
    <option v-for="(team, index) in teams" :key="index">
      {{ team.name }}
    </option>
  </select>
  <label class="form-label">Visitor Team</label>
  <select class="form-control" v-model="match.visitor_team">
    <option v-for="(team, index) in teams" :key="index">
      {{ team.name }}
    </option>
  </select>

  <h4>Scoreboard</h4>
  <span>{{ $store.state.house_points }}</span> x <span>{{ $store.state.visitor_points }}</span>


  <h4>Score Points</h4>

      <label class="form-label">Team</label>
      <select v-model="point.team">
        <option v-for="team in teams" :key="team.id" :value="team.name">
          {{ team.name }}
        </option>
      </select>

    <span v-if="loading">Loading...</span>
    <button v-else @click="savePoint" type="button" class="btn btn-primary">Score Point</button>

</template>

<script>
import axios from "axios";

let newTeam = (max) => {
  let max_id = max || 0
  return{
        'id': max_id + 1,
        'name': "",
        'city': "",
      }
}

let newMatch = (max) => {
  let max_id = max || 0
  return{
        'id': max_id + 1,
        'house_team': "",
        'visitor_team': "",
        'house_points': 0,
        'visitor_points': 0,
      }
}

let newPoint = (team_id,max) => {
  let max_id = max || 0
  return{
        'id': max_id + 1,
        'team': "",
        'team_id': team_id,
      }
}
const URL_matches = 'http://localhost:3000/matches';
const URL_points = 'http://localhost:3000/points';
const URL_teams = 'http://localhost:3000/teams';

export default {
  name: 'Matches',
  components: {
    },
  data(){
    return{
      match: newMatch(),
      point: newPoint(),
      matches: [],
      points: [],
      loading: true,
      editing: false,
      teams: [],
      team: '',

    }
  },
  methods: {
    savePoint(){
      this.loading = true;
      if(this.editing){
        axios.put(`${URL_points}/${this.point.id}`, 
        { ...this.point })
          .then(() => {
            Object.assign(this.editing, this.point)
            this.point = newPoint()
            this.loading = false
            this.editing = false
        })

      } else {
        axios.post(URL_points, 
        {...this.point})
          .then(() => {
          this.points.push(this.point)
          this.point = newPoint({params: {team_id: this.point.team}}, Math.max(...this.points.map(p => p.id)));
          this.loading = false;
          if(this.point.team === this.match.house_team){
            $store.dispatch('count_house_points')
          } else {
            $store.dispatch('count_visitor_points')
          }
      })
      }
    },
  },
  mounted() {
    this.loading = true
    axios.get(URL_points).then(({data}) => {
      this.points = data
      this.loading = false
      this.point = newPoint({params: {team_id: this.team.id}}, Math.max(...this.points.map(p => p.id)))
    })
    axios.get(URL_teams).then(({data}) => {
      this.teams = data
      this.loading = false
      this.team = newTeam(Math.max(...this.teams.map(t => t.id)))
    })
    axios.get(URL_matches).then(({data}) => {
      this.matches = data
      this.loading = false
      this.match = newMatch(Math.max(...this.matches.map(m => m.id)));
    })

  }
  
}
</script>

Answer

Question solved, one of my inputs wasn’t getting the correct value at the time I called the if-else structure. Had to call it elsewhere.