Vue.js What is the correct way to display the selected item from the dropdown?

I am trying to display the selected value in a pill badge that can be removed. I tried using v-for but I keep breaking the form or it display the selected like this:

here is my code:

data()
  {
  sport: {
    name: '',
    sportSize: null,
    externalId: '',
    teamId: null,
  },
  teamTransformer: teamTransformer,
  comboConfig: {
    itemPerPage:30
  }
  additionalSearchField: null,
  },
  computed:
  {
  ...mapGetters({
    getTeamById: "getTeamById"
  })
  methodds:{
   ...mapActions({
            fetchTeamsByName: "fetchTeamsByName",
            fetchTeamtDetails: "fetchTeamDetails",
            fetchOfferByName: "fetchOfferByName",
            fetchTeamInfo: "fetchTeamInfo"
        }),
        async onTeamComboSelect({value})
        {
            this.teamId = value;
            this.form.team = value;
            this.form.teamId = value;
            this.additionalSearchField = {teamId: this.teamId};
            await this.fetchTeamInfo({id: this.teamId});
        },
  }

     <div class="creation-form-field creation-form-field--with-error-wrapper">
                <label
                  for="team"
                  class="inline-3-columns--camp-wizard"
                >
                  <span class="title__field">Client*</span>
                  <combo-select
                    id="teams"
                    v-model="sport.teamId"
                    api-location="fetchTeamsByName"
                    api-details-location="fetchTeamDetails"
                    search-parameter="teamName"
                    :additional-search-fields="additionalSearchField"
                    :transformer="teamTransformer"
                    :config="{
                      ...comboConfig,
                      searchLabel: 'Search teams',
                      showDefaultLabelOnSelect: true
                    }"
                    class="input input__typeahead"
                    @on-select-item="onTeamComboSelect"
                  />
                  <input
                    v-model="sport.teamId"
                    type="hidden"
                    name="teamId"
                    class="form-control"
                    :data-vv-scope="sections[0].name"
                    value="team"
                  >
                </label>
                <div class="sport-results-decoration">
                  <div class="results">
                    <span
                      v-for="(teamName, key) in sport.teamId"
                      class="badge badge-pill badge-success"
                    >
                      <span>{{ teamName }}</span>
                      <font-awesome-icon
                        icon="times"
                        class="close"
                        @click="removeTeam()"
                      />
                    </span>
                  </div>
                </div>
              </div>

I also tried {{sport.team}} and {{sport.teamId}} but I get this

this is how my selected item shows up in inspector:

I tried using label but it shows up empty. Please help, how can I solve this problem? Many thanks for any help :)