puzzling over something simple in Vue

component.js

export default {
  name: 'ProfileComponent',
    // active tags is an array like ['foo', 'bar', 'baz']
  props: ['auth', 'authenticated', 'profile', 'activetags'],
  data() {
    return {
      ownProfile : true,
      isActive: function (ev) {
        // this isn't called at all        
        console.log("rendered on building the dom?")
        console.log(ev)
        // console.log(this)
      }
    }
  },
  computed: {
    // this is called once when displaying the component
    // isActive: function (ev) {
    //   console.log("a thing")
    //   console.log(ev)
    //   // console.log(this)
    // }
  },
  components: {
    Gravatar
  },
  methods: {
    toggleTag: function (triggeredEvent) {
      let triggeredTerm = triggeredEvent.target.textContent.trim()
      this.$emit('toggleTag', triggeredTerm)
      // update appearance by toggling a class
    },
    // this isn't called at all, when I would expect it to be called every time I check with 
    // v-bind:class="{ active: isActive }" in the template
    // isActive: function (ev) {
    //   console.log("rendered on building the dom?")
    //   console.log(ev)
    //   // console.log(this)
    // }


  }
}

template.html

<template>
  <div class="">
    <v-gravatar
      :email="profile.fields.email"
      :size="200" />

     <ul class='list tags'>
        <li
          v-for="tag in profile.fields.tags"
          <!-- 
            how do I access 'tag' in this function to update the styles based on whether a 
            tag is in a list of 'activeTags'?
          -->
          v-bind:class="{ active: isActive }" 
          @click="toggleTag">
          {{ tag.Name }}
        </li>
    </ul>
  
  </div>