Vue get/set interface

HTML

<link rel="stylesheet" href="//unpkg.com/bootstrap@next/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css">
<script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<div id="vue">
  <b-progress :value="counter" :max="max" show-progress animated></b-progress>
  <b-progress class="mt-1" :max="max" show-value>
    <b-progress-bar :value="counter*(6/10)" variant="success"></b-progress-bar>
    <b-progress-bar :value="counter*(2.5/10)" variant="warning"></b-progress-bar>
    <b-progress-bar :value="counter*(1.5/10)" variant="purple"></b-progress-bar>
  </b-progress>
  <b-btn class="mt-4 btn-purple" @click="clicked" variant="purple">Click me</b-btn>
</div>

CSS

body {
  padding: 20px;
}

.b-progress-purple {
      background-color: purple !important;
}

JavaScript

new Vue({
  el: '#vue',
  data() {
    return {
      counter: 45,
      max: 100,
      rand: 0
    }
  },
  methods: {
    clicked() {
    	this.rand = Math.random();
      this.counter = this.rand * this.max;
    }
  }
})