Recoding for component API?

How would I write this for composition API using Vue 3?

  checkboxFilter:{genre: [], moods: [], tempo: [], theme: []},
computed: {
filteredSongs: function(value, key){
let fltrdSongs = this.songs;
if(this.checkboxFilter.genre.length + this.checkboxFilter.moods.length + this.checkboxFilter.tempo.length + this.checkboxFilter.theme.length > 0) {
// checking if "genre" array has elements
if (this.checkboxFilter.genre.length > 0) {
fltrdSongs = this.songs.filter((song) => {
let length = this.checkboxFilter.genre.length;
while(length--){
if ((song.genre).indexOf(this.checkboxFilter.genre[length])!=-1) {
return true;
}
}
});
}
if(this.checkboxFilter.moods.length > 0) {
fltrdSongs = fltrdSongs.filter((song) => {
let length = this.checkboxFilter.moods.length;
while(length--){
if ((song.moods).indexOf(this.checkboxFilter.moods[length])!=-1) {
return true;
}
}
});
}
if(this.checkboxFilter.tempo.length > 0) {
fltrdSongs = fltrdSongs.filter((song) => {
let length = this.checkboxFilter.tempo.length;
while(length--){
if ((song.tempo).indexOf(this.checkboxFilter.tempo[length])!=-1) {
return true;
}
}
});
}
if(this.checkboxFilter.theme.length > 0) {
fltrdSongs = fltrdSongs.filter((song) => {
let length = this.checkboxFilter.theme.length;
while(length--){
if ((song.theme).indexOf(this.checkboxFilter.theme[length])!=-1) {
return true;
}
}
});
}
}
return fltrdSongs.filter((song) => {
return song.keywords.toLowerCase().match(this.search.toLowerCase()) ||
song.title.toLowerCase().match(this.search.toLowerCase()) ||
song.description.toLowerCase().match(this.search.toLowerCase())
});
},

I am attempting to change my website to the composition api format but I can't seem to get the checkboxes to filter as I want. I have already attempted to rewrite this but the problem I kept having was that each genre, mood, theme and tempo would only return the first string in the respective sections of the array of songs. What I want is to select a genre checkbox and have all tracks return that genre, even if it is number three in the genre list. At the moment it will only return the first one. Here is where I got to:

const searchTerm = ref('')
const genreFilter = ref([])
const moodsFilter = ref([])
const tempoFilter = ref([])
const themeFilter = ref([])
const filteredTracks = computed(() => {
let filtered = useSong.tracks;
if (searchTerm.value) {
const term = searchTerm.value.toLowerCase();
filtered = filtered.filter(track =>
track.description.toLowerCase().includes(term) || 
track.genre.toLowerCase().includes(term) ||
track.keywords.toLowerCase().includes(term) ||
track.moods.toLowerCase().includes(term)
);
}
if (genreFilter.value.length > 0) {
filtered = filtered.filter(track => genreFilter.value.includes(track.genre))
}
if (moodsFilter.value.length > 0) {
filtered = filtered.filter(track => moodsFilter.value.includes(track.moods))
}
if (tempoFilter.value.length > 0) {
filtered = filtered.filter(track => tempoFilter.value.includes(track.tempo))
}
if (themeFilter.value.length > 0) {
filtered = filtered.filter(track => themeFilter.value.includes(track.theme))
}
return filtered;
});

Thanks in advance.

Here is a link to the majority of the code:
SFC for the pages/components

The filter is not successful because track.genre is a comma separated string of multiple genres. Say your selected filters were "Rock" and "Pop" and your track has genre "Pop, Rock". Your filter is then trying to do:

["Rock", "Pop"].includes("Pop, Rock") // no match found

The filter would only produce a match here if the genreFilter included the entire string being tested, e.g.

["Rock", "Pop", "Pop, Rock"].includes("Pop, Rock") // 1 match found

One possible strategy to deal with this is to convert the string "Pop, Rock" into an array of strings using String.split() then test every value in that array against every value in the genreFilter array. Using Array.some() you can do it like this:

if (genreFilter.value.length > 0) {
  const trackGenres = track.genre.split(', ');
  filtered = filtered.filter(track =>
    genreFilter.value.some(g => trackGenres.includes(g))
  );
}

One pitfall to watch out for is that every track with multiple genres needs to be separated exactly by comma space ", ". If the JSON is missing a space between commas, or a genre has a comma as part of its name, you'll get a bad result and you'll need to rethink how you split and/or take into consideration special cases.