I want to filter my JSON data by multiple categories in Vuejs. I'm using Vue 3 and collect.js.

Template:

<select v-model="selectedCategory" multiple>
    <option :value="null">Choose category</option>
    <option v-for="category in categories" :key="category.id" :value="category">{{ category.name }}</option>
</select>
<div v-for="project in filteredProjects" :key="project.id">
    <h6>{{ project.name }}</h6>
    <small>{{ project.category.name }}</small>
</div>

Script:

import collect from "collect.js";
export default {
    data() {
        return {
            projects: [{id: 1, name: "Lorem ipsum", category: {id: 1, name: "Website"}}, {id: 2, name: "Sit amet", category: {id: 2, name: "App"}}],
            categories: [{id: 1, name: "Website"}, {id: 2, name: "App"}],
            selectedCategory: null,
        };
    },
    computed: {
        filteredProjects() {
            let projects = this.projects;
            if (this.selectedCategory != null) {
                projects = projects.filter((project) => {
                    return collect(project.category).contains("id", this.selectedCategory.id);
                });
            }
            return projects;
        },
    },
};

Any suggestions?

Update: One project can also have multiple categories like this:

...
projects: [{id: 3, name: "Lorem ipsum dolor", category: {id: 1, name: "Website"},{id: 2, name: "App"}}],
...