如何在点击时改变按钮的颜色？(Vue)

<template>
  <button @click="changeColor" :class="{ 'active': isActive }">按钮</button>
</template>

<script>
export default {
  data() {
    return {
      isActive: false
    };
  },
  methods: {
    changeColor() {
      this.isActive = !this.isActive;
    }
  }
};
</script>

<style>
button {
  background-color: #ccc;
}

.active {
  background-color: red;
}
</style>