Trying to filter an array based on inputs

I have an array of documents with different values.
Here is a simplified example:

documents: [
 {
    name: 'Some name',
    type: 'PDF',
    tags: [
        'tag 1',
        'tag 2',
        'tag 3'
    ],
    dateOfCreation: 'DD/MM'
  },
  {
    name: 'Some name',
    type: 'Excel',
    tags: [
        'tag 4',
    ],
    dateOfCreation: 'DD/MM'
  },
  {
    name: 'Some name',
    type: 'Word',
    tags: '',
    dateOfCreation: 'DD/MM'
  }
]

I am creating two input fields. One has a dropdown displaying the types of documents and the other is a dropdown that display the tags of each document.
My goal is that when the user selects a type or tag from the dropdown, the documents array will be filtered to only show the documents with that specific type or tag.

I already accomplished this with the types.

I made a json file called documentTypes where I store the different type values that the document can have.

[
  "pdf",
  "word",
  "excel"
]

I have a vue input field, which has a two-way-binding with an empty variable called filteredDocumentType.
For my input options it loops through the json file that contain the different document types.

  <b-form-group class="mt-4">
    <b-form-select v-model="filteredDocumentType">

      <template>
        <b-form-select-option :value="null" disabled>-- 'Select document by type' --</b-form-   select-option>
      </template>

      <b-form-select-option :value="'all'">-- All --</b-form-select-option>

      <option v-for="documentType in documentTypes" :key="documentType" :value="documentType">
        {{ $t('model.document.types.' + documentType) }}
      </option>

    </b-form-select>
  </b-form-group>

Then I make a computed property that gets the documents array and checks the input and type. If no type has been selected or if the user selects "all" then all documents will be shown in the list, but if there are types available and the user picks one, then the list will get filtered to show only that specific type of document.

      filteredDocuments() {
        if (this.filteredDocumentType === null || this.filteredDocumentType === 'all') {
          return (this.documents ?? []).filter(document =>
            (document.name.toUpperCase().includes(this.search.toUpperCase()) ||
                 this.$t(`model.document.types.${document.type}`).toUpperCase().includes(this.search.toUpperCase())))
    }
        else {
          return (this.documents ?? []).filter(document =>
            (document.name.toUpperCase().includes(this.search.toUpperCase()) ||
               this.$t(`model.document.documentTypes.${document.type}`).toUpperCase().includes(this.search.toUpperCase())) &&
        document.type === this.filteredDocumentType)
        }

This works, but I want to do the same thing for the tags. But I do not store my tags in a json file. As you can see in the array, each document can have a multiple set of tags, and I cannot make a json file for them, because they get entered by the user on a different place on the frontend.

If I create a json file called documentTags and manually add the user-tags in a list and then import it, then I can use the same method:

  filteredDocuments() {
    if (this.filteredDocumentType === null || this.filteredDocumentType === 'all') {
      return (this.documents ?? []).filter(document =>
        (document.name.toUpperCase().includes(this.search.toUpperCase()) ||
             document.tags[0].toUpperCase().includes(this.search.toUpperCase())))
}
    else {
      return (this.documents ?? []).filter(document =>
        (document.name.toUpperCase().includes(this.search.toUpperCase()) ||
           document.tags[0].toUpperCase().includes(this.search.toUpperCase())) &&
    document.tags[0] === this.filteredDocumentType)
    }

and

      <b-form-group class="mt-4">
        <w-b-form-select v-model="filteredDocumentType">

          <template>
            <b-form-select-option :value="null" disabled>-- {{ 
    $t('selectDocumentByType') }} --</b-form-select-option>
          </template>

          <b-form-select-option :value="'all'">({{ $t('all') }})</b- 
   form-select-option>

          <option v-for="documentTag in documentTags" 
    :key="documentTag" :value="documentTag">
            {{ documentTag }}
          </option>

        </w-b-form-select>
      </b-form-group>

But what do I loop through if I don't want to use a json file?
I need somehow loop through the nested array containing tags and also make sure to filter out any document with empty tags to make sure I do not get blank input fields.

The following method does not work:

  <option v-for="documentTag in documents.tags" :key="documentTag" :value="documentTag">
    {{ documentTag }}
  </option>

Also tried this:

  <option v-for="documentTag in document.tags[0]" :key="documentTag" :value="documentTag">
    {{ documentTag }}
  </option>

I suggest using a Computed Property to store the list of tags

This will be calculated by Vue, every time "documents" changes.

computed: {

    uniqueTags(){
        const uniqueTagsSoFar = [];
        this.documents.forEach(document => {
            if (document && document.tags && document.tags.length>0){
                document.tags.forEach(tag=>{
                    if (!uniqueTagsSoFar.includes(tag)){
                        tags.push(tag)
                    }
                })
            }
        });
        return uniqueTagsSoFar
    }

}

Then, in your program, treat this.uniqueTags like a variable. It will be a list of tags, not including "", and listing each tag only once.

One way for getting tags in computed property:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const documents = [
 {
    name: 'Some name',
    type: 'PDF',
    tags: [
        'tag 1',
        'tag 2',
        'tag 3'
    ],
    dateOfCreation: 'DD/MM'
  },
  {
    name: 'Some name',
    type: 'Excel',
    tags: [
        'tag 4',
        'tag 1',
        'tag 3'    ],
    dateOfCreation: 'DD/MM'
  },
  {
    name: 'Some name',
    type: 'Word',
    tags: '',
    dateOfCreation: 'DD/MM'
  }
]
const tags = documents.reduce((r,s) => {
  if (s.tags.length) r.push(s.tags)
  return r;
}, []).flat()
console.log([...new Set(tags)])

<!-- end snippet -->