Return data with Firestore and Vuejs

Dear I need to know how to return data with Firestore and Vuejs. The problem I have is that I can see the data from console.log () but not from v-for="".

Complete script:

<template>
    <div id="cuentacontable">
        {{ mensaje }}
        <br/>
        <!-- Button trigger modal -->
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
      Agregar rubro
        </button>
        <mpcontable></mpcontable>
         <mpcuenta></mpcuenta>
       <table class="table">
  <thead>
    <tr>
      <th scope="col">Cuenta</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="(cuenta, idx) in cuentaShow" :key="idx">
      <td >
          {{ cuenta }} 

        <a 
        href="javascrip:void(0)"

        >
        <i class="fas fa-angle-down"></i>
        </a>
          <button 
          type="button" 


          class="btn btn-warning"
          data-toggle="modal" 
          data-target="#ModalSubCuenta">
          Agregar
          </button>

      </td>

    </tr>   
  </tbody>
</table>
    </div>
</template>


<script>
import Vue from "vue";
import mpcontable from "./modal/mpcontable.vue";
import mpcuenta from "./modal/mpcuenta.vue";
import db from "../../config/configinit"
import firebase,{ functions } from 'firebase'
import vuefire from 'vuefire'

import EventBus from '../../../../bus'


//let pcuentaRef = db.ref('rubro')
let pcuentaRef = db.collection('rubro')


export default {
  name: "cuentacontable",
  firebase:function(){
      return{       
          //pcuentas : pcuentaRef,
      }
  },
  data() {
    return {
      mensaje: "Agregar rubro a plan contable",
      plandcuenta:{
          nombrepcuenta:'',
      },
      id:'',
      cuentaShow:[],
      dataRubros:[],
      notes:[]
    };
  },
  firestore () {
    return {

      cuentaShow: pcuentaRef
    }
  },
  components:{
      mpcontable,
      mpcuenta
  },
  created: function(){
      this.getRubro()

  },
  methods:{
       emitIDRubro(id){
           EventBus.$emit('emitIDRubro', id) 
      },
      showRubro(id){
          console.log(id)
        let subRubroRef = db.collection('rubro').where('id','==',id)
        console.log(subRubroRef)
      },
      getRubro(){
          let self=this;
          db.collection("rubro").get().then(function(querySnapshot) {
                querySnapshot.forEach(function(doc) {
                // doc.data() is never undefined for query doc snapshots


                //console.log(doc.id, " => ", doc.data());
                //console.log(doc.data().name)

                 self.cuentaShow=doc.data().name;
                 console.log(self.cuentaShow)
                                });
                });

      }
  }

};
</script>

The problem is that I do not have any errors, I just can not see the data from the v-for.