How do I reference data in my firebase child nodes?

Question

I'm trying to reference child nodes of a firebase database using a for loop. I'm using Vue and Vue-fire. The problem is that in the following code, categories[addItem.category] doesn't reference the correct data.

<el-select v-model="addItem.category" placeholder="Select a category." id="category-select">
    <el-option
    v-for="(val, key) in categories"
    :key="val['.key']"
    :label="val['.key']"
    :value="val['.key']">
    </el-option>
</el-select>    
<el-button @click="showAdd=true">new category</el-button>
<el-select v-model="addItem.subcategory" placeholder="Select a subcategory." id="subcategory-select" v-show="addItem.category!=''">
    <el-option
    v-for="subcat in categories[addItem.category]"
    :key="subcat['.key']"
    :label="subcat['.key']"
    :value="subcat">
    </el-option>
</el-select>
<el-button v-show="addItem.category!=''" @click="showAdd=true">add subcategory</el-button>      

I am trying to get all the keys of the selected category, which should give 'machinery' if 'mechanical' is selected. Currently, selecting 'mechanical' makes categories[addItem.category] equal to undefined. Here is what the data looks like in my db: [![enter image description here][1]][1]

Can anyone tell me why my firebase reference categories[addItem.category] isn't referencing the child values?

If it helps, this is how I save the data:

methods: {
     add(){
         var updates = {};
         if (this.addItem.category==''){
         updates['/' + this.addItem.text + '/'] = "null";        
         }
         else if (this.addItem.subcategory==''){
         console.log('adding a subcategory: ' + this.addItem.subcategory);
         console.log(this.addItem.category + ' is the category name');
         updates['/' + this.addItem.category + '/' + this.addItem.text + '/'] = "null";              
         }      
         db.ref('categories').update(updates).then((successMessage) => {
         // successMessage is whatever we passed in the resolve(...) function above.
             // It doesn't have to be a string, but if it is only a succeed message, it probably will be.
             console.log("Yay! " + successMessage);
         });

Which references the following data:

data(){ return {
         addItem: {
         open: false,
         count: 0,
         category: '',
         subcategory: '',
         kks: {
             name: ''
         },
         document: {
             name: ''

         },         
         product: {

             name: ''
         },
         text: ''
             },  
}}

}

and here is the firebase property:

 firebase: function(){
 return {
     categories: db.ref('categories')

 }   

 }

  [1]: https://i.sstatic.net/hYZN6.png

Answer 1

Here's what I ended up doing. The following was added as a computed property:

 subcategories: function(){
     if (this.addItem.category){
     var val;
     db.ref('categories/' + this.addItem.category).on('value', function(snapshot){
         val = snapshot.val();
     });
     return val;
     }
     return this.categories;
 }