v-on:change not working on select element?

Question

Vue.js

<template>
    <div class="vpn-path-configure">
        <form>
            <div class="form-group" v-for="(path, index) in pathElements" :key="'server-' + index">
                <label :for="'server-' + index" :key="'label-' + index">Сервер #{{ index + 1 }}</label>
                <select class="form-control" :id="'server-' + index" v-on:change="changeServer(index, $event)" :key="'select-' + index">
                    <option v-for="(server, server_index) in path.servers" :key="'option-' + index + '-' + server_index" :value="server_index">{{ server.ip + ':' + server.port }}</option>
                </select>
            </div>
            <button class="btn btn-primary">Создать</button>
        </form>
    </div>
</template>

<script>
    export default {
        name: "vpn-path-configure",

        props: [
            'serversProp',
        ],

        data() {
            const servers = JSON.parse(atob(this.serversProp));

            console.log(servers);

            servers.push({ip:'111', port: 2222});

            const first_path = {
                servers: servers,
                selected: null,
            };

            return {
                servers: servers.data,
                maxServersInPath: 5,
                pathElements: [first_path],
            };
        },

        methods: {
            changeServer: function (index, event) {
                console.log(event);
                console.log('change');
            }
        },
    }
</script>

<style scoped>

</style>

Tell me why it doesn't work?

Answer 1

v-on:change works.

Look for the problem elsewhere