Two way data flow on Vue component - vue.js

Question

I want a selector in a Vue component to update when the stored value in Vuex is updated. Here is a simplified version of the vue component:
<template>
<v-autocomplete
outlined
dense
v-model="team"
label="Select Team"
:items="teams"
item-text="name"
item-value="_id"
return-object
class="mx-3 mt-3"
#change="selectTeam"
></v-autocomplete>
</template>
The JS:
<script>
export default {
name: 'NavDrawer',
data() {
return {
team: null,
teams: [],
};
},
async created() {
this.team = this.$store.getters['teams/allTeams'].find(
(t) => t.name === this.$route.params.team,
);
this.teams = this.$store.getters['teams/allTeams'];
},
methods: {
async selectTeam() {
if (this.team) {
await this.$store.dispatch('editTeam/selectTeam', this.team);
this.$router.push(`/team/${this.team.name}`);
} else {
this.$router.push('/');
}
},
},
};
</script>
And the Vuex store:
export default {
namespaced: true,
state: () => ({
editedTeam: {},
}),
mutations: {
selectTeam(state, team) {
state.editedTeam = team;
},
resetTeam(state) {
state.editedTeam = {};
},
},
actions: {
selectTeam({ commit }, team) {
commit('selectTeam', team);
},
resetTeam({ commit }) {
commit('resetTeam');
},
},
getters: {
getSelectedTeam: (state) => state.editedTeam,
},
};
I'm not sure if it matters, but this vuex store is passed into an index file to create the Vuex.Store -- this is working correctly and is not the issue.
I want the team stored in editedTeam to reactively update the team selected in the v-autocomplete component, when a new editedTeam is selected elsewhere in the application. I want the v-autocomplete selector to send a new team to editedTeam when it is selected. I think I should be using mapState for this and storing them as a computed value -- but nothing I've tried has worked. I find the vuex documentation to be lacking in good examples.
Thanks!