<div id="app" class="app"> 
  <div class="box" :class="{spin: spin}"></div>
  <button @click="spin = true">Spin</button>
</div>
html, body {
  display: grid;
  justify-content: center;
  align-content: center;
  height: 100%;
  
  font-family: sans-serif;
  font-size: 1rem;
}

.app {
  display: grid;
  justify-items: center;
}

.box {
  width: 100px;
  height: 100px;
  margin: 15px;
  
  background-color: cadetblue;
}

.spin {
  transform: rotate(360deg);
  transition: 1s;
}
const app = Vue.createApp({
  data: function () {
    return {
      spin: false
    }
  }
})

const vm = app.mount('#app')

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://unpkg.com/vue@next