Передача в пропсе массива странное поведение VueJS

Передаю из одного компонента в другой (в модальное окно) пропсом массив по вызову метода

 async getDataProductBrands(){
      let currentdata = await this.$store.getters["List/ProductItemById"](Number(this.query)) 
      this.currentSelectItems[0] = currentdata.productCard.brand
    }

<template>
  <div>
      <i class="fa fa-pencil-square-o fa-lg" aria-hidden="true" @click="getDataProductBrands" v-b- 
      modal.modal-brands></i>

       <b-modal id="modal-brands" title="BootstrapVue"  size="lg"  centered no-fade no-close-on- 
       backdrop 
        no-close-on-esc ok-title="Сохранить">         

             <treecheckboxform :current-select-items=currentSelectItems  
             :multipleResult=false />

       </b-modal>

  </div>
</template>

В этом компоненте: treecheckboxform получаю странное поведение, если сразу вывожу пропс

<template>
        <div>
          {{currentSelectItems[0]}}
        </div>
</template>

То всё ок, выводит массив:

{ "id": 12, "bitId": 12, "active": null, "name": "NAM", "code": "NAM", "timestampCreated": null, "timestampUpdated": null }

Если пытаюсь вывести только свойство id

 <template>
        <div>
          {{currentSelectItems[0].id}}
        </div>
</template>

То при первом вызове компонента всегда получаю:

[Vue warn]: Error in render: "TypeError: Cannot read property 'id' of undefined"

При повторном вызове модалки, если не обновлять страницу всё отображается.