SOURCE

// ES6+ syntax

const app = new Vue({
  el: '#app',
  data: {
    chosen: '',
    people: [
      { id: 1, name: 'Alice'},
      { id: 2, name: 'Jim'},
      { id: 3, name: 'John'},
      { id: 4, name: 'Tom'},
    ],
  },
  methods: {
    onClick(index) {
      this.chosen = this.people[index].name;
    },
  },
  computed: { // computed variables
    showChosen() {
      return !!this.chosen;
    },
    formattedName() {
      return this.chosen.toUpperCase();
    },
  }
});

<div id="app">
  <div class="box">
    <div class="row" v-for="(person, index) in people">
      <div class="left-col">{{ person.name }}</div>
      <div><button @click="onClick(index)">Choose</button></div>
    </div>
    <hr>
    <div v-if="showChosen">
      Chosen: {{ chosen }} - {{ formattedName }}
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.min.js"></script>

/* optional */
[v-cloak] {
  display:none;
}

.row {
  width: 200px;
  display: flex;
}

.left-col {
  flex: 1;
}