Как вывести массив в другом компоненте во Vue?

Question

[Маленький Вася]

Всем привет!
Имеется компонент с массивом и свойствами starsItem

<script>
    import modal from './include/modal.vue'
    export default {
        data: function() {
            return {
                selectedItem: null,
                showModal: false,
                starsItem: [{
                        itemImg: '/src/assets/img/01.jpg',
                        itemId: 23321,
                        itemPrice: 42000,
                        itemRegion: 'Ыссык-Кол',
                        itemHeading: 'Срочно продаю 5 ком. квартиру',
                        itemAddr: 'Средний джал 12',
                        itemParam: '5 соток',
                        itemRoom: 2,
                        itemSeries: 2,
                        itemEtaj: 3,
                        itemMetre: 5,
                        itemStreet: 'Южный',
                        itemPrice: 55000,
                        itemDesc: 'Все коммуникации центральные, хороший район, есть детская площадка, охрана'
                    }
                ]
            }
        },
        methods: {
            currentItem(e) {
                this.selectedItem = e;
                this.showModal = true;
            },
            charactedLeft(elem, limit){
                let char = elem.length;
                if (char >= limit) {
                    return elem = elem.substr(0, limit)
                    char = limit
                }
            }
        },
        components: {
            'popup': modal
        }
    }
</script>

Мне нужно вывести этот массив со свойствами в другом компоненте

<template>
  <div v-if="detail">
    <my-header></my-header>
    <my-menu></my-menu>
    <div class="page">
      <div class="container">
        <div class="row">
          <div class="col-12">
            <h2 class="">{{detail.itemHeading}}</h2>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import myHeader from './header.vue'
  import myMenu from './menu.vue'
  import stars from './stars.vue'
  export default {
    data(){
      return{
        items: stars,
        detail: null
      }
    },
    components: {
      myHeader,
      myMenu,
      
    },
    created: function(){
      let index = this.items;
      this.detail = index.starsItem[0]
    }
  }
</script>
<style lang="sass" scoped>
.page
  padding: 20px 0 
</style>

Но почемуто выдает undefined

Answer 1

[Evgeny Kulakov]

Какая-то странная архитектура, но допустим.
Чтобы получить то, что вам нужно, попробуйте вот так обратиться: let index = this.items.data()

Вообще, если это какие-то данные, которые используются не в одном компоненте, то их нужно или в модуль какой-то отдельный вынести или куда-то выше по иерархии компонентов, чтобы эти данные потом передать вниз нуждающимся компонентам.