Hide element with v-if after a state change

I have been crushing my head for 2 days with this, but I think I am not understanding the reactivity thing yet.

Here is the component:

<template>
  <div class="tile-content">
    <router-link :to="{ name: 'anime', params: { slug: slug } }">
      <div class="overlay"></div>
      <figure class="image is-16by9">
        <img :src="cover || defaultCover">
      </figure>
      <div class="name">
        <h3>{{ name }}</h3>
      </div>
      <div class="bookmark" v-if="isAuthenticated">
        <div v-if="isBookmarked" @click.prevent="unBookmark">
          <b-icon icon="star"></b-icon>
        </div>
        <div v-else @click.prevent="addBookmark">
          <b-icon icon="star-outline"></b-icon>
        </div>
      </div>
    </router-link>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
import { mapState } from 'vuex';
import UserModule, { IUserState } from '@/app/account/store';

@Component({
  computed: {
    ...mapState<IUserState, any>('User', {
      isAuthenticated: (state: IUserState) => !!state.account.token,
      bookmarks: (state: IUserState) => state.bookmarks,
    }),
    isBookmarked: function() {
      this.bookmarks.has(this.slug);
    }
  }
})
export default class Tile extends Vue {
  @Prop() private name!: string;
  @Prop() private slug!: string;
  @Prop() private cover!: URL;
  private isAuthenticated!: boolean;
  private isBookmarked!: boolean;
  private bookmarks!: Set<string>;

  get defaultCover() {
    return require('@/assets/default-cover.jpg');
  }

  private async addBookmark() {
    UserModule.AddBookmark(this.slug);
  }

  private async unBookmark() {
    UserModule.RemoveBookmark(this.slug);
  }
}
</script>

<style lang="scss" scoped>
</style>

What I want to accomplish is this:

GIVEN User with bookmarks [A, B, C] (each of them is a "slug")
WHEN User clicks star on B
THEN unBookmark will be triggered removing B from state.bookmarks
AND star will change to start-outline

My problem is that bookmarks is a computed variable and slug is a prop, and I can't seem to find a way of comparing them every time the state changes.

Just found that Set type is not reactive in Vue (yet)

https://github.com/vuejs/vue/issues/2410#issuecomment-434990853

It is planned for Vue 3.

You can use a watcher https://v2.vuejs.org/v2/guide/computed.html

Also you might be interested in lifecycle hooks : beforeUpdate, updated .