title: Invalid prop: type check failed error in VueJS
body: <p>I am trying to use a component named CardRenderer.vue which renders card   using array of Objects. I am using the same component again &amp; again to render the data. I am having this error "[Vue warn]: Invalid prop: type check failed for prop "renderData" when I tried passing prop from component.</p>
  
  <p>I tried passing different values and different types but it did'nt work.</p>
  
  <p>Here is the code:</p>
  
  <p>CardRenderer.vue</p>
  
  <pre><code>&lt;template lang="html"&gt;
  
    &lt;div&gt;       
      &lt;b-container class="bv-example-row"&gt;      
         &lt;b-row v-for="(row, i) of rows" v-bind:key="i"&gt;       
            &lt;b-col v-for="(item, j) of row" v-bind:key="j" &gt;
  
                      &lt;!-- you card --&gt;
                &lt;b-card 
                  :title="item.title" 
                  img-src="item.icon" 
                  img-alt="Image" 
                  img-top 
                  tag="article" 
                  style="max-width: 20rem;" 
                  class="mb-2"
                &gt;
                  &lt;b-card-text&gt;
                    &lt;h1&gt;{{item.name}}&lt;/h1&gt;
                    &lt;pre&gt;{{item.description}}&lt;/pre&gt;
                  &lt;/b-card-text&gt;
                    &lt;b-button :href="'/dashboard/'+item.name" variant="primary"&gt;More&lt;/b-button&gt;
                &lt;/b-card&gt;                
            &lt;/b-col&gt;
          &lt;/b-row&gt;
      &lt;/b-container&gt;    
    &lt;/div&gt;
  
  &lt;/template&gt;
  
  &lt;script lang="js"&gt;
    export default  {
      name: 'CardRenderer',
      props: {
        renderData: []
      },
       data() {
        return {
          rows: null
        }
      },
      mounted() {
  
        const itemsPerRow = 3
        let rowss = []
        let arr = this.renderData
        // eslint-disable-next-line
        // console.log(this.renderData)
        for (let i = 0; i &lt; arr.length; i += itemsPerRow){
            let row = []
            for (let z = 0; z &lt; itemsPerRow; z++) {
              row.push(arr[z])
            }
            rowss.push(row)
        }
  
  
        this.rows = rowss
  
        // eslint-disable-next-line                
        console.log(this.rows) 
  
      },
  
      methods: {
  
      },
      computed: {
        //  rows() {
        //  }
  
      }
    }
  &lt;/script&gt;
  
  &lt;style scoped&gt;
  
  &lt;/style&gt;
  </code></pre>
  
  <p>CardGrouper.vue:</p>
  
  <pre><code>&lt;template lang="html"&gt;
  
    &lt;div  class = "full" &gt;
  
      &lt;div class="h-50" style=" background-color: #C8544F"&gt;
        &lt;h1 align="center"&gt;{{$store.getters.responseAPI.title}} &lt;/h1&gt;
  
        &lt;CardRenderer :renderData=this.$store.getters.responseAPI.apps /&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
  
  &lt;/template&gt;
  
  &lt;script&gt;
  import CardRenderer from "./CardRenderer.vue"
  /* eslint-disable */
    export default  {
      name: 'CardGrouper',
      components: {
        CardRenderer
      },
      props: [],
      mounted() {
  
      },
      data() {
        return {
  
        }
      },
      methods: {
  
      },
      computed: {
  
      }
  }
  &lt;/script&gt;
  
  &lt;style scoped &gt;
    .full{
      width: 100vw;
      height: 90vh;
      background: linear-gradient(to bottom, Red 30%, white 50%);
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>Something.vue</p>
  
  <pre><code>&lt;template lang="html"&gt;
      &lt;!-- &lt;h1&gt;Something&lt;/h1&gt; --&gt;
      &lt;CardRenderer :renderData=valObj /&gt;
  &lt;/template&gt;
  
  &lt;script lang="js"&gt;
  import CardRenderer from './CardRenderer'
  
      export default  {
          name: 'something',
          components: {
              CardRenderer
          },
          props: [],
  
          data() {
              return {
                  valObj: []
              }
          },
          mounted() {
              let key = this.findUrl()
              let value = this.$store.getters.responseAPI.apps.filter((elem) =&gt; {
                  if(elem.name == key) return elem.apps
              })
  
              if (value.length &gt; 0)
                  this.valObj = value[0].apps
              //eslint-disable-next-line
              console.log(this.valObj)
          },
          methods: {
              findUrl() {
                  let url  = window.location.pathname.split("/").slice(-1)[0];
                  return url
              }       
          },
          computed: {
  
          }
      }
  &lt;/script&gt;
  
  &lt;style scoped &gt;
    .something {
  
    }
  &lt;/style&gt;
  </code></pre>
  
  <p>I am having this error.
  It looks like this.
  <a href="https://i.stack.imgur.com/OJXRC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OJXRC.png" alt="enter image description here"></a></p>
  
  <p>This is the data I am passing as a prop from <code>Something.vue</code>
  <a href="https://i.stack.imgur.com/FomGt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FomGt.png" alt="enter image description here"></a></p>
  
  <p>This is how <code>value</code> looks like
  <a href="https://i.stack.imgur.com/pZAfL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pZAfL.png" alt="enter image description here"></a></p>
  
  <p>Error is being generated somewhere from <code>Something.vue</code>.
  I am passing array of objects as a prop.
  How do i rectify this error, to make it work.</p>