JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/vue"></script>
<div id="app">
  <span v-if="rolling">rolling your dice…</span>
  <span class='die-face' v-else>{{ faces[result] }}</span>
</div>

<!-- outside the vuejs controlled code -->
<button id="button">roll the dice</button>

CSS

#app {
  line-height: 6em;
}
.die-face {
  font-size: 6em;
}

JavaScript

const app = new Vue({
  el: '#app',
  data: {
    faces: ['⚀','⚁','⚂','⚃','⚄','⚅'],
    result: 4, // fairly random already
    rolling: false
  }
})

function roll () {
  app.$data.rolling = true
	setTimeout(function() {
    app.$data.rolling = false
    app.$data.result = Math.floor(Math.random() * 6)
	}, 1000)
}

document.getElementById('button').addEventListener('click', roll)