<div id="tabs">
 <ul class="nav nav-tabs">
  <li><a>Tab 1</a></li>
  <li><a>Tab 2</a></li>
 </ul>
 <div class="tab-content">
  <div class="tab-pane">Pane 1</div>
  <div class="tab-pane">Pane 2</div>
 </div>
</div>

<div id="tabs">
 <ul class="nav nav-tabs">
  <li v-bind:class="{ active: tab === 1}"><a>Tab 1</a></li>
  <li v-bind:class="{ active: tab === 2}"><a>Tab 2</a></li>
 </ul>
 <div class="tab-content">
  <div class="tab-pane" v-bind:class="{ active: tab === 1}">
   Pane 1</div>
  <div class="tab-pane" v-bind:class="{ active: tab === 2}">
   Pane 2</div>
 </div>
</div>

<div id="tabs">
 <ul class="nav nav-tabs">
  <li v-bind:class="{ active: tab === 1}" v-on:click="tab = 1">
   <a>Tab 1</a>
  </li>
  <li v-bind:class="{ active: tab === 2}" v-on:click="tab = 2">
   <a>Tab 2</a>
  </li>
 </ul>
 <div class="tab-content">
  <div class="tab-pane" v-bind:class="{ active: tab === 1}">
   Pane 1</div>
  <div class="tab-pane" v-bind:class="{ active: tab === 2}">
   Pane 2</div>
 </div>
</div>

new Vue({
 el: '#tabs',
 data: { 
  // Tab 1 is selected by default
  tab: 1 
 }
});

<div id="app" v-bind:class=" { 'modal-open': show }">
 <button class="btn btn-primary" v-on:click="toggle">
  Open
 </button>
 <div class="modal" tabindex="-1" v-bind:class="{ in: show }"
  v-bind:style="modalStyle">
  <div class="modal-dialog">
   <div class="modal-content">
    <div class="modal-body">
     <p>Vue-powered modal!</p>
    </div>
   <div class="modal-footer">
    <button class="btn" v-on:click="toggle">Close</button>
   </div>
  </div>
 </div>
 </div>
</div>

new Vue({
 el: '#app',
 data: { 
  show: false 
 },
 methods: {
  toggle() { this.show = !this.show; }
 },
 computed: {
  modalStyle() {
   return this.show ? 
    { 'padding-left': '0px;', display: 'block' } : {};
  }
 }
});