Vue.JS无法读取未定义的属性

Question

我已经在Vuepress项目中创建了该组件，但不断收到以下错误：Error in v-on handler: "TypeError: Cannot read property 'activeTags' of undefined"对我没有任何意义，我在computed下定义了activeTags，它显示可以在Vue开发人员工具中找到，但无论我的toggleTag方法为何无法工作...

我在这里想念什么？

<script>
export default {
  name: 'TagList',
  data: () => {
    return {
    }
  },
  computed: {
    activeTags:{
      //getter
      get: () => {
        console.log('HERE')
        let { tags = "[]"} = this.$route.query
        tags = JSON.parse(tags)

        return tags
      },
      //setter
      set: (newArray) => {
        const newValue = encodeURIComponent(JSON.stringify(newArray))
        this.$router.push(
          { query: Object.assign(
                                  {},
                                  this.$route.query,
                                  { tags: newValue }
                                )
          });
      },
    },
    data () {
      return this.$page.frontmatter
    },
    tagsInUse() {
      const { tags = [] } = this.$site.themeConfig
      if(tags.length > 0){
        return tags.filter(t => t.inUse)
      }
    }
  },
  methods: {
    addTag: (addedValue) => {
      let tagArr = this.activeTags;
      tagArr.push(addedValue);
      this.activeTags = tagArr;
    },
    removeTag: (rmValue) => {
      let tagArr = this.activeTags;
      this.activeTags = tagArr.filter(item => item != rmValue);
    },
    toggleTag: (value) => {
      if(typeof this.activeTags !== 'undefined'){
        console.log('ACTIVE', this.activeTags)
        this.activeTags.contains(value) ? this.removeTag(value) : this.addTag(value)
      }
    }
  }
}
</script>
<template>
  <div class="px-10 pb-0">
    <ul class="list-reset inline-flex flex-wrap justify-center text-sm lowercase">
      <li v-for="(item, index) in tagsInUse" v-on:click="toggleTag(item.name)" class="text-grey text-center bg-grey-lighter px-3 py-1 m-2 rounded ">
          #{{item.name}}
      </li>
    </ul>
  </div>
</template>