<div id="app">
      <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>
</div>
new Vue({
  el: '#app',
        data() {
            const servers = [];

            console.log(servers);

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

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

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

        methods: {
            changeServer: function (index, event) {
              alert('on:change index=' + index)
                console.log(event);
                console.log('change');
            }
        }
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js