Передача реквизита, являющегося массивом, двум различным компонентам

Question

Это мой третий день работы с Vue CLI, и я хочу передать реквизиты, являющиеся массивом, двум различным компонентам.Компоненты называются Продукты и Модал.Модальный компонент зависит от компонента Products.Когда я передаю реквизиты обоим компонентам внутри моего App.vue, я не хочу, чтобы оба компонента отображались в моем App.vue.Как я уже сказал, мой модальный компонент зависит от моего компонента Products.

Моя общая цель - показать название продукта, фотографию и описание в моем модале.

У меня проблема в том, что я делаю запрос на получение в своем App.vue, который я заполняюпустой массив, а затем передать его компоненту Products.Если я передам массив в качестве реквизитов как для Продуктов, так и для Модальных, я получу дополнительный модал для рендеринга на уровне приложений, который имеет смысл, но я не хочу этого.

Я все еще привыкаю к ​​тому, как VueРаботы и советы или помощь будут высоко ценится.

Это может быть очень очевидный ответ, который я просто пропускаю, но я учусь, поэтому, пожалуйста, поймите это.

App.Vue(Я делаю здесь запрос get и заполняю пустой массив, чтобы затем передать этот массив в качестве реквизитов двум компонентам):

<template>
<div id="app">
  <all-products v-bind:newProductsArray="newProductsArray"></all-products>
</div>
</template>

<script>
//imports
import Vue from 'vue'
import AllProducts from './components/AllProducts.vue'
import Modal from './components/Modal.vue'
//import so I can use vue resource for an http request
import VueResource from 'vue-resource'
Vue.use(VueResource)

    //export components to be rendered by main.js then by the DOM
    export default {
      components: {
        'all-products': AllProducts
      },
      data() {
        return {
          //empty products array to be filled after get request
          products: [],
          //declare new array to be set to products array, then passed as props. I do this because without another array,
          //all products component will receiev an empty array before it can be filled by the http request.
          newProductsArray: []
        }
      },
      //request to retrieve all products from API using Created
      created() {
        //http request using vue resource from dependencies
        this.$http.get('https://tap-on-it-exercise-backend.herokuapp.com/products').then(function(data) {
          //fill products array by grabbing the data, slicing ot, then setting it to products array
          this.products = data.body.slice(0, data.body.length)
          //set products array to the new array to be passed down as props to all products component.
          this.newProductsArray = this.products
        })
      }
    }
    </script>

Компонент продукта (этот компонент получает реквизиты из app.vue):

<template>
<div class="products">
  <h1 class="all-products">All Products</h1>
  <div v-for="product in newProductsArray" :key="product.id" class="single-product">
    <div class="product-container">
      <div class="row">
        <div class="col-md-8 center-block">
          <div class="title">{{product.title}}</div>
          <img class="images" :src="product.photo_url">
          <div class="price">${{product.price}}</div>
          <modal/>
        </div>
      </div>
    </div>
  </div>
</div>
</template>

<script>
//imports
import Vue from 'vue'
import Modal from './Modal.vue'
//import bootstrap to be used to style buttons and modal.
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue)

export default {
  //receive new products array as props from app
  props: ['newProductsArray'],
  components: {
    'modal': Modal
  },

  data() {
    return {
      //set modal show to false by default
      modalShow: false
    }
  },

  methods: {

    showModal() {
      //toggle modal to show
      this.modalShow = true
    },

    closeModal() {
      //toggle modal to close
      this.modalShow = false
    }

  },

}
</script>

Модальный компонент (я хочу получать те же реквизиты, что и продукты)

<template>
  <div>
    <b-button @click="modalShow = !modalShow">Show Product Info</b-button>
    <b-modal v-model="modalShow" title="title">
    <div class="modal-body">
      <img class="img-responsive" style="margin:0 auto;" src="http://placehold.it/300x340" alt="">
    </div>
      <p class="product-description">Description</p>
      <div slot="modal-footer" class="w-100">
        <b-button size="md" class="float-right" variant="warning" @click="modalShow=false">Close</b-button>
        <b-button size="md" class="float-right" variant="primary" @click="modalShow=false">Like</b-button>
      </div>
    </b-modal>
  </div>
</template>

<script>
  export default {
    props: ['newProductsArray'],
    data() {
      return {
        modalShow: false
      }
    }
  }
</script>