title: [Vue warn]: Missing required prop: "productInfo"
body: <p>I'm fairly new to Vue so this may be obvious, but I must be missing something.  I keep getting the error: <code>[Vue warn]: Missing required prop: "productInfo"</code> in my .vue file.  It says its found in ProductSlider.vue.</p>
  
  <p>ProductSlider.vue</p>
  
  <pre><code>    &lt;template&gt;
    &lt;div
      id="recommendedProducts"&gt;
      &lt;h2&gt;{{ params.headerText }}&lt;/h2&gt;
      &lt;div
        class="wrapper"&gt;
        &lt;div class="carousel-view"&gt;
          &lt;carousel
            :navigation-enabled="true"
            :min-swipe-distance="1"
            :per-page="5"
            navigation-next-label="&lt;i class='fas fa-3x fa-angle-right'&gt;&lt;/i&gt;"
            navigation-prev-label="&lt;i class='fas fa-3x fa-angle-left'&gt;&lt;/i&gt;"&gt;
            &lt;slide
              v-for="product in products"
              :key="product.id"&gt;
              &lt;Product
                :id="product.id"
                :product-info="product"/&gt;
            &lt;/slide&gt;
          &lt;/carousel&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    import Slider from './Slider'
    import Product from './Product'
    import {mapState, mapGetters} from 'vuex'
    import axios from 'axios';
  
    export default {
      name: "Slider",
      components: {
        Product
      },
      props: {
        productInfo: {
          type: Object,
          required: true
        }
  
      },
  </code></pre>
  
  <p>I chopped off the end of the ProductSlider code because the rest is very long and irrelevant.</p>
  
  <p>And then here is my Product.vue:</p>
  
  <pre><code>&lt;template&gt;
    &lt;Product&gt;
      &lt;div class="img-container text-center"&gt;
        &lt;a
          :href="productInfo.href"
          class="handCursor"
          tabindex="0"&gt;
          &lt;img
            v-if="productInfo.imgOverlay"
            :src="productInfo.imgOverlayPath"
            :alt="productInfo.title"
            :aria-label="productInfo.title"
            border="0"
            tabindex="-1"&gt;
          &lt;img
            :src="productInfo.imgURL"
            :alt="productInfo.title"&gt;
        &lt;/a&gt;
      &lt;/div&gt;
      &lt;h4 class="itemTitle"&gt;{{ productInfo.title }}&lt;/h4&gt;
      &lt;div class="price-div"&gt;
        &lt;div class="allPriceDescriptionPage"&gt;{{ productInfo.price }}&lt;/div&gt;
      &lt;/div&gt;
      &lt;a
        href="#"
        tabindex="0"
        name="instantadd"&gt;
        &lt;div class="btn_CA_Search buttonSearch gradient"&gt; Add to Cart&lt;/div&gt;
      &lt;/a&gt;
    &lt;/Product&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    export default {
      name: "Product",
      props: {
        productInfo: {
          type: Object,
          required: true,
        },
      },
    }
  &lt;/script&gt;
  </code></pre>
  
  <p>I have <code>productInfo</code> in the props so I'm not sure why I keep getting this error.</p>