Trigger method on change of a select

I have a list of teams with a hasMany relationship which I am displaying in a sort of collapsible. There is a dropdown to select which team the user is own. The value changes on screen but the user is not moved to the proper panel as per the new team.

I think I am missing something. Here's my component:

<template>
    <div class="team__panel" v-for="cat in teams">
        <div class="team__cat">
            <i class="fa fa-caret-right" v-show="!cat.show"></i>
            <i class="fa fa-caret-down" v-show="cat.show"></i>
            <span class="title" @click="cat.show = ! cat.show">
                {{cat.team_name}} ({{cat.members.length}})
            </span>
            <span class="counter pull-right">
                Leader: {{cat.leader.firstname}}&nbsp;{{cat.leader.lastname}}
            </span>
        </div>
        <div class="team__table" v-show="cat.show">
            <table class="table table-striped table-condensed">
                <tr>
                    <th style="width:40%;">Name</th>
                    <th style="width:20%;">Title</th>
                    <th style="width:20%;">Phone</th>
                    <th style="width:20%;">Team</th>
                </tr>
                <tr v-for="item in cat.members|orderBy 'lastname'">
                    <td style="vertical-align: middle;">
                        {{item.firstname|capitalize}}&nbsp;{{item.lastname|capitalize}}
                    </td>
                    <td style="vertical-align: middle;">
                        {{item.title|capitalize}}
                    </td>
                    <td>
                        {{item.phone|phone}}
                    </td>
                    <td>
                        <select class="form-control" name="team_id" id="team_id" v-on="change: teamChange(item)" v-model="item.team_id">
                            <option value="{{t.id}}" v-for="t in teams">{{t.team_name}}</option>
                        </select>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <pre style="display:none;">{{teams|json}}</pre>
</template>
<style>

</style>
<script type="text/babel">
    export default {
        props: [],
        data() {
            return {
                teams: [],
                techs: [],
                show: false
            };
        },
        computed: {},
        created: function() {
            this.fetchTeamsList();
            this.fetchTechsList();
        },
        methods: {
            fetchTeamsList: function() {
                var path = '/api/teams';
                this.$http.get(path, function(teams) {
                    _.each(teams, function(team) {
                        team.show = false;
                    });
                    this.teams = teams;
                }.bind(this));
            },
            fetchTechsList: function() {
                var path = '/api/techs';
                this.$http.get(path, function(techs) {
                    this.techs = techs;
                }.bind(this));
            },
            teamChange: function(obj) {
                alert(obj.team_id);
            }
        }
    };
</script>