Jumbotron - Bootstrap-Vue

https://bootstrap-vue.github.io/docs/components/jumbotron

HTML

<script src="https://unpkg.com/bootstrap-vue/dist/bootstrap-vue.js"></script>
<link rel="stylesheet" href="//unpkg.com/bootstrap@next/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="//unpkg.com/tether@latest/dist/css/tether.min.css">
<link rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css">
<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="//unpkg.com/tether@latest/dist/js/tether.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<div id="app">
    <b-form-group label="Sorting">
       <b-form-checkbox-group
          v-model="sorting"
          :options="filterData.sorting"
        />
    </b-form-group>

</div>

CSS

#app {
  padding: 20px;
  height: 450px;
}

JavaScript

new Vue({
  el: '#app',
  computed: {
    sorting: {
      get: function () {
        return this.filterInput.sorting
      },
      set: function (value) {
        // this array needs to always have only one value
        this.filterInput.sorting = [value[0]]
      }
    }
  },
  data () {
  	return {
    	filterData: {
      	sorting: ['PRICE_ASC', 'PRICE_DESC']
      },
      filterInput: {
	      sorting: []
      }
    }
  }
  
})