JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/[email protected]"></script>
<script src="https://unpkg.com/[email protected]"></script>
<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<div id="myApp" style="padding:2rem; background-color:#fff;">
  <span>What fruit do you prefer? (v-for Generated list)</span>
  <br>
  <br>
  <div>
    <button class="query-input" type="button" v-for="(button, index) in questions.attrs" @click="answer(button.id, button.name)" @keydown.:button.key="answer(button.id, questions.attrs[0].name)">{{button.key}} {{ button.name }}</button>
    <br>
  </div>

  <div>
    <span>What fruit do you prefer? (Hardcoded List)</span>
    <br>
    <br>
    <button class="query-input" type="button" @click="answer(questions.attrs[0].id, questions.attrs[0].name)" @keydown.d="answer(questions.attrs[0].id, questions.attrs[0].name)">D. {{ questions.attrs[0].name }}</button>
    <button class="query-input" type="button" @click="answer(questions.attrs[1].id, questions.attrs[1].name)" @keydown.e="answer(questions.attrs[1].id, questions.attrs[1].name)">E. {{ questions.attrs[1].name }}</button>
    <button class="query-input" type="button" @click="answer(questions.attrs[2].id, questions.attrs[2].name)" @keydown.f="answer(questions.attrs[2].id, questions.attrs[2].name)">F. {{ questions.attrs[2].name }}</button>
  </div>


</div>

CSS

html,
body,
button {
  margin: 0;
  height: 100%;
  color: #333;
  text-align: left;
}

button {
  display: block;
  padding: 15px;
  margin-left: 15px;
  width: 100px
}

button.query-input > span:before {
  background: white;
  color: black;
  padding: 1px 5px 1px;
  margin: 1px 5px 1px;
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-radius: 3px;
}

JavaScript

Vue.config.keyCodes = {
  a: 65,
  b: 66,
  c: 67,
  d: 68,
  e: 69,
  f: 70
}

new Vue({
  el: '#myApp',
  data: {
    questions: {
      "attrs": [{
        "id": "1",
        "key": "A.",
        "name": "Apples"
      }, {
        "id": "2",
        "key": "B.",
        "name": "Oranges"
      }, {
        "id": "3",
        "key": "C.",
        "name": "Peaches"
      }],
    },
  },
  methods: {
    answer(key, name) {
      console.log(key, name)    }
  }
})