Estoy usando Vue3 para desarrollar la parte frontal de una aplicación web sobre películas. En esta aplicación, el usuario tiene una lista de aquellas películas que ya ha visto. Para agregar una película a la lista, el usuario encuentra una película, va a su perfil y hace clic en un botón. Después de eso, el botón Agregar se reemplaza por un botón Eliminar.

Para implementar esta funcionalidad, tengo un método created() en mi componente Vue, donde inyecto la lista de usuarios (compuesta por identificadores de películas) y la película. También tengo una propiedad calculada que verifica si una película está dentro de la lista. En el siguiente fragmento de código, puede ver la propiedad calculada:

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

En la sección de plantilla, tengo este código HTML:

 <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>

Los métodos "addFilmToList()" y "deleteFilmFromList()" están en la sección de métodos de mi componente Vue, y realizan una solicitud HTTP a una API que he desarrollado con Express, para agregar o eliminar la película de la lista, respectivamente.

El problema es el siguiente: el código anterior funciona y cuando hago clic en el botón Agregar/Eliminar, la propiedad calculada actualiza su valor. Sin embargo, tengo que actualizar la página para obtener el valor calculado actualizado de la propiedad.

¿Hay alguna manera de obtener el nuevo valor sin actualizar la página?