How do I watch the output of a function?

Question

I have 2 buttons. One adds a movie to local storage, the other removes it from there. I made a function that basically switches the button. If the movie is added it shows "remove", if the movie's not been added it shows the button "add". The function works but it doesn't know when the boolean changes so the button doesn't change. Someone explained that i should use watch property, but how am I supposed to watch an output of a function? here is the code

<template>
    <div>
        <div class="card" v-for="movie in movies"
            :key="movie.id">
            {{movie.title}}
            {{movie.release_date}}
            <button v-show="!showButton(movie.id)" type="submit" @click="storeMovie(movie.id)" >
                Aggiungi
            </button>
            <button v-show="showButton(movie.id)" type="submit" @click="removeMovie(movie.id)">
                Rimuovi
            </button>
            
        </div>
        
        <div class="card" v-for="favourite in watchlist"
            :key="favourite.id">
            {{favourite.title}}
        </div>
    </div>
</template>

<script>
import axios from 'axios'

    export default {
        name: 'HomeComp',
        data () {
            return {
                movies: [],
                watchlist: [],
                movie: null,
            }
        },
        mounted () {
            axios
                .get('https://api.themoviedb.org/3/movie/popular?api_key=###&language=it-IT&page=1&include_adult=false&region=IT')
                .then(response => {
                    this.movies = response.data.results
                    // console.log(response.data.results)
                })
                .catch(error => {
                    console.log(error)
                    this.errored = true
                })
                .finally(() => this.loading = false)
        },
        watch: {
            switchButton(oldValue, newValue) {
                if (oldValue != newValue) {
                    this.showButton(id) = true;
                } //made an attempt here
            }
               
        },
        methods: {
            storeMovie(id) {
                const favouriteMovie = this.movies.find(movie => movie.id === id )
                this.watchlist.push(favouriteMovie);
                localStorage.setItem("watchlist", JSON.stringify(this.watchlist));
            },
            removeMovie(id) {
                const removedMovie = this.watchlist.find(movie => movie.id === id )
                const indexMovie = this.watchlist.indexOf(removedMovie);
                if (indexMovie > -1) { 
                   this.watchlist.splice(indexMovie, 1); 
                }

                localStorage.setItem("watchlist", JSON.stringify(this.watchlist));
            },
            showButton(id) {
                const favouriteMovie = this.watchlist.find(movie => movie.id === id )
                if (favouriteMovie && favouriteMovie.length > 0) {
                    return true
                } else{
                    return false
                }
            }
        },
    }
</script>

<style scoped lang="scss">

</style>

Answer 1

A better approach would be to store the state of a movie being stored or not in the watchlist directly on the movie object.

Then use a computed to get the watchlist from the movie list instead of using two different arrays.

<template>
  <div>
    <div class="card" v-for="movie in movies" :key="movie.id">
      {{movie.title}}
      {{movie.release_date}}
      <button v-show="!movie.toWatch" type="submit" @click="storeMovie(movie.id)">
        {{ movie.toWatch ? 'Rimuovi' : 'Aggiungi' }}
      </button>
    </div>

    <div class="card" v-for="favourite in watchList" :key="favourite.id">
      {{favourite.title}}
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomeComp',
  data() {
    return {
      movies: [],
    }
  },
  computed: {
    // Get the watchList from the movies list
    watchList() {
      return this.movies.filter(movie => movie.toWatch)
    }
  },
  watch: {
    watchList(newWatchList) {
      // Update the localStorage whenever the list changes
      localStorage.setItem("watchlist", JSON.stringify(newWatchList));
    }
  },
  mounted() {
    // your axios call
  },
  methods: {
    storeMovie(id) {
      const favouriteMovie = this.movies.find(movie => movie.id === id)
      if (favouriteMovie) {
        // just reverse the boolean
        favouriteMovie.toWatch = !favouriteMovie.toWatch
      }
    },
  },
}
</script>