I am using Vue3 to develop the frontend part of a web application about films. In this app, the user has a list of those films he has already watched. To add a movie to the list, the user finds a film, goes to its profile and clicks on a button. After that, the add button is replaced by a delete button.

To implement this functionality, I have a created() method on my Vue component, where I inject the user list (composed of film ids) and the film. I also have a computed property which checks if a film is inside the list. In the next code snippet you can see the computed property:

computed: {
            filmIsInList() {
                return this.userList.includes(this.film._id);
        }
        
        }

In the template section, I have this HTML code:

<button v-if="!filmIsInList" 
v-on:click="addFilmToList();" 
title="Add film to list" 
style="border-radius: 112px;">
<font-awesome-icon icon="fa-solid fa-eye" class="fa-xl"/>
</button>

<button v-if="filmIsInList"
 v-on:click="deleteFilmFromList();" 
 title="Delete film from list"
style="border-radius: 112px;">
<font-awesome-icon icon="fa-solid fa-eye" class="fa-xl added-to-list" />
</button>

Methods "addFilmToList()" and "deleteFilmFromList()" are in the methods section of my Vue component, and they make an HTTP request to an API I've developed with Express, to add or delete the film from the list, respectively.

The problem is as follows: The above code works, and when I click on the add/delete button, the computed property updates its value. However, I have to refresh the page to get the updated computed value of the property.

Is there a way to get the new value without refreshing the page?