I am trying to recreate the search functionality of outlook. My entire data set is contained in the following interfaces:

export interface Folder{
    id: string | null;
    name: string;
    folders: Folder[] | null;
    emails: Email[]
}

export interface Email {
    id : string;
    conversation_id: string;
    from: Contact;
    to: Contact[];
    cc: Contact[];
    bcc: Contact[];
    subject: string;
    body: string;
    body_preview: string;
    has_attachments: boolean;
    file_attachments: FileAttachment[];
    received_date: Date
}

export interface Contact
{
    email_address : number;
    name : string | null;
}

export interface FileAttachment
{
    id: string;
    file_name: string;
    content_type: string;
    content_bytes: string;
}

As you can see it is a complex object with multiple layers. I have the following v-text-field which I will be using to search for strings in my nested object:

            <v-text-field
        v-model="search"
        append-inner-icon="mdi-magnify"
        label="Dynamic Search"
        density="compact"
        variant="outlined"
        clearable
        rounded
        hide-details
        single-line
        flat
        color="primaryDarken4"/> 

I am more concerned about the emails array as that is currently the only thing I am showing on the screen. I am wondering how to create a filter on this. I honestly am struggling at even know where to start. Should I be doing this recursively (if possible) or should I manually do a loop through each node looking for a match and if so utilize filter() or something else? Basically though whatever text goes in the search box if that email object has that data in it then it should be kept. Any help would be appreciate.