[Vuejs]-Toggle .active class with vuejs 2

<li class="text-center" :class={active: isActive} >

This basically says if this.isActive === true then the class “active” will be applied.

You have to set a property in your data object called isActive, and toggle it with javascript. When it is true, it will apply your class, when it it is false, it wont.

here is the sample code below for reactive class

<template>
  <div>
    <button @click="clicktorearrange"></button>
    <div :class="reactiveclass">when click the arrangement will change </div>
  </div>
</template>

<script>
export default {
  data: () => ({
    reactiveclass: 'text-center pa-1 ma-1'
  }),
  methods: {
   clicktorearrange () {
      this.reactiveclass = 'text-right pa-2 ma-2'
    }
  }
}
</script>