Data change updating at random - Vue/Vuex

Question

I have a 'watched-items' feature: click on the icon, it adds to an array in my Vuex store, the icon changes to a tick, click on the tick, it removes it from the Vuex store and the icon changes back.

When I check Vuex in dev tools it's working as it's supposed to.

The strange thing is the data property responsible for switching out the icons only sets to false when it wants to. It will work for a short period, across refreshes, then will stop for no apparent reason and won't come back until it feels like it.

Example (apologies for the quality):

In the console you can see the data property 'watched' switches to true but only switches to false when it feels like it. Any ideas why it's doing this?

'Watched' icons:

<img
  src="svg/eye-regular.svg"
  v-if="!watched"
  @click="addToWatched(item), isWatched(item), log()"
/>
<img
  src="check-solid.svg"
  v-if="watched"
  @click="removeFromWatched(item), isWatched(item), log()"
/>

('item' is an object being passed as a prop)

watched data property:

data() {
  return {
    watched: false
  };
},

computed:

...mapGetters(["watchedItems"])

methods:

...mapActions([
  "addToWatched",
  "removeFromWatched"
]),

isWatched(item) {
  let watchFind = this.watchedItems.find(i => {
    return i.id === item.id
           ? (this.watched = true)
           : (this.watched = false);
  });
},

log() {
  console.log("data -> watched", this.watched);
}

Vuex store (not sure this code is relevant as the store seems to work fine):

const actions = {
    // commit items to watched
    addToWatched({ commit }, item) {
        commit("setWatchedItems", item);
    },
    removeFromWatched({ commit }, item) {
        commit("deleteWatchedItem", item);
    },
};

const mutations = {
    setWatchedItems: (state, item) => {
        let watchFind = state.watched.find(i => {
            return i.id === item.id;
        });

        if (!watchFind) {
            state.watched.push(item);
        }
    },
    deleteWatchedItem: (state, item) => {
        let watchFind = state.watched.find(i => {
            return i.id === item.id;
        });

        if (watchFind) {
            state.watched = state.watched.filter(i => {
                return i.id !== item.id;
            });
        }
    },
};

const state = {
    watched: []
};

const getters = {
    watchedItems: state => state.watched
};

UPDATE

It's still acting as described above, but, I've found that if I add to 'watched' on one item then immediately after remove from 'watched' on another, it works:

(You can't see when I click but at the start of the gif I'm clicking the same icon repeatedly with no change)

Answer 1

the event handlers should be separated by ; like :

<img
  src="svg/eye-regular.svg"
  v-if="!watched"
  @click="addToWatched(item); isWatched(item); log()"
/>
<img
  src="check-solid.svg"
  v-if="watched"
  @click="removeFromWatched(item); isWatched(item); log()"
/>

Answer 2

Replaced the data and method with a computed property and it seems as though it's fixed the issue.

    computed: {
        ...mapGetters(["watchedItems"]),
        watched: function() {
            return this.watchedItems.find(i => {
                return i.id === this.item.id ? true : false;
            });
        }
    },