JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<link rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.15/vue.min.js"></script>
<div id='app' v-bind:class="classObject">
<b-alert show> Hello {{ name }}! </b-alert>
</div>

CSS

.comp--lock {
  text-decoration: underline;
}

.comp--red {
  color: red;
}

JavaScript

window.onload = function() {
	new Vue({
  	el: '#app',
    data: {
    	color: 'red',
      name: 'Zeus',
      isLock: true
    },
    computed: {
      classObject () {
      	return {
          'comp--lock': this.isLock,
          ['comp--' + this.color]: true
        }
      }
    }
 	})
}