Filter in Vue 3 doesn't work with API for separate tables

I have 2 tables. if two columns value matches each other i dont want them to display. If fish_id matches user_id i dont want them to be displayed. For the logged in user. The other filter works but not this one for some reason.

´´´ onMounted(async () => { try { // Fetch user data const userResponse = await axios.get(http://localhost:8000/api/user/${userId});

    if (userResponse.status === 200) {
        // Set user preferences
  
    } else {
        console.log('Failed to fetch user preferences');
    }

    // Fetch the video data
    const response = await axios.get(`http://localhost:8000/api/cluster?userId=${userId}`);
    console.log('Response Data:', response.data)

    // Fetch fish data
    const fishResponse = await axios.get('http://localhost:8000/api/fishdata');
    console.log('Fish Response Data:', fishResponse.data)

    if (fishResponse.status && response.status === 200) {

        videos.value = response.data; // Set the videos array
        fishes.value = fishResponse.data; // Set the fish array

        // Filter out videos based on the logged-in user's preferences
        filteredVideos.value = videos.value.filter(video => {
            // Check if the video's user_id matches any fish_id from the fish data
            const hasMatchingFishId = fishes.value.some(fish => fish.fish_id === video.user_id);
            return !hasMatchingFishId;
        });

        // Filter out videos based on the logged-in user's preferences
        filteredVideos.value = videos.value.filter(video => {
            //console.log('Response Data:', video.user_id)
            return (
                // other filters
            );
        });

        // Filter out videos with the same user_id
        const uniqueUserVideos = [];
        const userIds = new Set();
        filteredVideos.value.forEach(video => {
            if (!userIds.has(video.user_id)) {
                uniqueUserVideos.push(video);
                userIds.add(video.user_id);
            }
        });

        // Shuffle the filtered videos array
        filteredVideos.value.sort(() => Math.random() - 0.5);

        // Slice the array to show only 4 random responses
        filteredVideos.value = filteredVideos.value.slice(0, 4);

        // Show the first video
        showNextVideo();
    } else {
        console.log('No video data found');
    }
} catch (error) {
    console.error('Error fetching video data:', error);
}

}); ´´´

No errors the consol.log show the data from both tables just fine. i can see the values coming for each column if i single target them too. But matching them with each other and if they do match remove them from the array is what i want.

I need to do this in frontend because it has to match the logged in user id.