Toggle class on template items

i am simply trying to modify this remplate code so it will toggle a highlighting class when the element is clicked. i know i’m not getting the ref correct, but that’s the only way i can see this working. can i get some pointers plz?

Vue.component('qblock', {
  template: `
    <div :id="'q' + blocknum" class="qtrBlock">
      <p :class="qtrData {qtrDataActive: (isActive == ref) }" 
         :ref="'pd-blk' + blocknum"  <!-- blocknum is passed by parent: 1-9 -->
         @click.prevent="possibleDataCount > 0 ? generateTable('possible') : null">
        possible: <span>{{ possibleDataCount }}</span>
      </p>
      <p :class="qtrData {qtrDataActive: (isActive == ref) }" 
         :ref="'pbd-blk' + blocknum" 
         @click.prevent="preBookedDataCount > 0 ? generateTable('preBooked') : null">
        pre-booked: <span>{{ preBookedDataCount }}</span>
      </p>
      <!-- several more <p> elements removed for clarity -->
    </div>
  `,
  data() {
    return {
      isActive: ''  //  this should contain the clicked elements ref: eg. pb-blk4
    }
  },
  methods: {
    generateTable(category) {
      switch(category) {
        case 'possible':
          //  do other non-related stuff
          this.isActive == ref  //  i know this is incorrect, help me fix it plz!
          break
        case 'preBooked':
          //  do other non-related stuff
          this.isActive == ref  //  i know this is incorrect, help me fix it plz!
          break
      }
      this.$emit('build-table', this.payload.data)
    },  //  generateTable
  },
}

i know that isActive == ref is not the correct way to reference the ref, but i’ve been unable to find how to implement this correctly. i just need the qrtDataActive class to be applied ONLY to the clicked element, not ALL of them. if there’s a better, more streamlined, way to do this, i’m all eyes. :smiley: