I am using Vue to create a Netflix app, I manage to call the API that has a list of movies.

What is not working is the search function, when I type a movie name it does not filter to the letters that are presented in the search box, can anyone assist with this?

JS code

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");
});