Populating a v-data-table with filtered data from firebase

Question

I am making a application for teachers to select exam tasks from different subjects and years that is pulling data from firebase database, after user selects all of 3 dropdown menu options. So when i have numbers in the third dropdown (where its sais "Poglavje") its all working ok, but i want there to be title of the "exam":

This is a code for how i bind data to dropdown menu. So when i use only "option.ID_Poglavja" for binding i get just numbers as shown on picture 1, but i want it to look like this:

<label for="model"><b>Poglavje</b></label>
          <select class="form-control"
          
          @change ="onSelected2($event)"
          name="model" 
          id="model" 
          v-model="model">
  
            <option :value="null" disabled selected>Izberi Poglavje</option>
            <option 
              v-for = "option in poglavje_options[0]"
              :v-bind:value = "option.id"
              v-bind:key = "option.id"
            >
              {{option.ID_Poglavja}} <!--{{option.Naslov}}-->
              
            </option>
          </select>

But if i do this my v-data-table is not working as it should, even if i mannualy assing numbers to tittles:

onSelected2:function(event){
          this.selected2 = event.target.value;
            switch(this.selected2){

              case "Naravna in cela števila, izrazi, enačbe, neenačbe" :  this.izbiraPoglavja = 1; break;
              case "Deljivost, izjave, množice" :  this.izbiraPoglavja = null; break;
              case "Racionalna števila":  this.izbiraPoglavja = 3; break;
              case "Realna števila":  this.izbiraPoglavja = 4; break;
              case "Pravokotni koordinatni sistemi, linearna funkcija":  this.izbiraPoglavja = 5; break;
              case "Geometrija na ravnini in v prostoru":  this.izbiraPoglavja = null; break;
              case "Vektorji":  this.izbiraPoglavja = null; break;
              case "Koreni, lastnosti funkcij, potenčna funkcija":  this.izbiraPoglavja = 8; break;
              case "Kvadratna funkcija, kompleksna števila":  this.izbiraPoglavja = null; break;
              case "Eksponentna in logaritemska funkcija":  this.izbiraPoglavja = null; break;
              case "Kotne funkcije":  this.izbiraPoglavja = null; break;
              case "Geometrijski liki": this.izbiraPoglavja = 12; break;ž
              case "Geometrijska telesa": this.izbiraPoglavja = 13; break;
              case "Polinomi in racionalne funkcije": this.izbiraPoglavja = 14; break;
              case "Stožnice":  this.izbiraPoglavja = null; break;
              case "Zaporedja in vrste": this.izbiraPoglavja = 16; break;
              case "Kombinatorika": this.izbiraPoglavja = 17; break;
              case "Verjertnostni račun": this.izbiraPoglavja = 18; break;
              case "Funkcije - limita in zveznost": this.izbiraPoglavja = 19; break;
              default: this.izbiraPoglavja = null;
            }
      this.izbiraPoglavja = Number(this.selected2); 
      console.log(this.izbiraPoglavja);

And this is my code in button for populating a table:

 tabela(event){

          if(this.izbiraPoglavja == null){

            db.collection("Kontrolne naloge").orderBy("ID_Naloge")
            .where("Predmet_FK", "==", this.izbiraPredmeta)
            .where("Letnik_FK", "==", this.izbiraLetnika)
            .get().then((snapshot) => {
            const documents = snapshot.docs.map((doc) => 
            doc.data());
            this.filter_data.splice(this.event);
            
          return this.filter_data.push(documents);
          });
          return console.log(this.filter_data); 

          }else{

          db.collection("Kontrolne naloge").orderBy("ID_Naloge")
            .where("Predmet_FK", "==", this.izbiraPredmeta)
            .where("Letnik_FK", "==", this.izbiraLetnika)
            **.where("Poglavje_FK", "==", this.izbiraPoglavja)** +this is where i get stuck+
            .get().then((snapshot) => {
            const documents = snapshot.docs.map((doc) => 
            doc.data());
            this.filter_data.splice(this.event);

          return this.filter_data.push(documents);
          });

          return console.log(this.filter_data);
}
           
 },

Also i tried getting just a number from this.selected2[0] even tho in console log its returning the wright amount of exams :

This is how i bind them and get the number informnt of Title:

<select class="form-control"

  @change ="onSelected2($event)"
  name="model" 
  id="model" 
  v-model="model">

    <option :value="null" disabled selected>Izberi Poglavje</option>
    <option 
      v-for = "option in poglavje_options[0]"
      :v-bind:value = "option.id"
      v-bind:key = "option.id"
    >
      {{option.ID_Poglavja}} {{option.Naslov}}
      
    </option>
  </select>

As you can see i put {{option.ID_Poglavja}} {{option.Naslov}} together, and if i put only ID_Poglavja it works fine but with tittle added i cannot filter out my data.