Estoy usando Vue para crear una aplicación de Netflix, logro llamar a la API que tiene una lista de películas.

Lo que no funciona es la función de búsqueda, cuando escribo el nombre de una película no filtra las letras que se presentan en el cuadro de búsqueda, ¿alguien puede ayudarme con esto?

codigo js

 const url = "https://project-apis.codespace.co.za/api/movies"; const watchlistEndpoint = " https://project-apis.codespace.co.za/api/list"; const { createApp } = window.Vue; const getData = () => new Promise((resolve) => { fetch(url) .then((response) => response.json()) .then((json) => json.data.map((item) => item.name)) .then((names) => resolve(names)); }); const component = { data() { return { list: [], search: '', } }, computed:{ filteredList(){ return this.list.filter(item => item.includes(this.search)) } }, mounted() { getData().then((resolveData) => { this.list = resolveData;}) }, template: /*HTML Elements*/ `<div v-if="list.length < 1">Fetching data...</div> <div v-else> <input v-model="search"> <ul> <li v-for="item in list">{{ item }}</li> </ul> </div> ` } window.addEventListener("DOMContentLoaded", () => { const app = createApp(component); app.mount("#netflixApp"); });