JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="app">

  <div id="info" class="modal fade" role="dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4>state info</h4>
      </div>
      <div class="modal-body" v-if="clicked">
        <div> Name: {{ clicked.name }} </div>
        <div> Capital: {{ clicked.capital }} </div>
      </div>
    </div>
  </div>

  <div v-for="s in states" class="tbl-row row">
    <div class="col-xs-3 col-md-3">
      <a href="#info" data-toggle="modal" @click="clicked = s">{{ s.name }}</a>
    </div>
  </div>
  
</div>

Babel + JSX

new Vue({
  el: '#app',
  data: {
    clicked: null,
    states: [
      { name: 'Germany', capital: 'Berlin' },
      { name: 'France', capital: 'Paris' },
      { name: 'Great Britain', capital: 'London' }
    ],
  }
});