TrackFavoriteIcon.vue

 <template>
  <button @click="$store.dispatch('favorites/toggle', track.id)" v-if="button" :class="['ui', 'pink', {'inverted': isFavorite}, {'favorited': isFavorite}, 'icon', 'labeled', 'button']">
    <i class="heart icon"></i>
    <translate v-if="isFavorite" :translate-context="'Content/Track/Button.Message'">In favorites</translate>
    <translate v-else :translate-context="'Content/Track/Button.Message'">Add to favorites</translate>
  </button>
  <button
    v-else
    @click="$store.dispatch('favorites/toggle', track.id)"
    :class="['ui', 'favorite-icon', {'pink': isFavorite}, {'favorited': isFavorite}, 'basic', 'circular', 'icon', 'really', 'button']"
    :aria-label="title"
    :title="title">
    <i :class="['heart', {'pink': isFavorite}, 'basic', 'icon']"></i>
  </button>
</template>

<script>
export default {
  props: {
    track: {type: Object},
    button: {type: Boolean, default: false}
  },
  computed: {
    title () {
      if (this.isFavorite) {
        return this.$pgettext('*/Favorites/Icon.Tooltip/Verb', 'Remove from favorites')
      } else {
        return this.$pgettext('*/Favorites/Icon.Tooltip/Verb', 'Add to favorites')
      }
    },
    isFavorite () {
      return this.$store.getters['favorites/isFavorite'](this.track.id)
    }
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>