title: How to pass a JSON Array in a parent child communication in VueJS?
body: <p>I am new in VueJS and I have some problems with JSON file and parent-child communication.
  I need to pass each array that's in JSON file to child Vue Element.</p>
  <p>In my mind, the parent reads the JSON file and with v-for, creates a child, one for each array in the JSON file.</p>
  <p>I don't find anything online, and with props, I can't do this.
  Please, help me!!</p>
  <p>I need to pass the 'firstArray' (Array of Objects) from parent to child .vue files.</p>
  <p><strong>This is my JSON file:</strong></p>
  <pre><code>{
    &quot;firstArray&quot;: [
      {&quot;id&quot;: 01, &quot;name&quot;: &quot;Lucas&quot;},
      {&quot;id&quot;: 02, &quot;name&quot;: &quot;Michael&quot;}
    ],
  
    &quot;secondArray&quot;: [
      {&quot;id&quot;: 01, &quot;name&quot;: &quot;Maria&quot;},
      {&quot;id&quot;: 02, &quot;name&quot;: &quot;Taylor&quot;}
    ],
  
    ...
  }
  </code></pre>
  <p><strong>This is the parent .vue file to read the name of Array in a JSON file:</strong></p>
  <pre><code>&lt;template&gt;
    &lt;div id=&quot;parent&quot;&gt;
      &lt;Child v-for=&quot;array in arrays&quot; :key=&quot;array&quot; :child-name=&quot;array&quot;&gt;&lt;/Child&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  
  &lt;script&gt;
  import data from '../assets/file.json'
  import Child from './Child'
  
  export default {
    name: 'Parent',
    components: {
      Child
    },
    computed: {
      arrays() {
        return Object.keys(data)
      }
    }
  }
  &lt;/script&gt;
  </code></pre>
  <p><strong>This is the child .vue file, it needs to read only the objects into every single array</strong></p>
  <pre><code>&lt;template&gt;
    &lt;div id=&quot;child&quot;&gt;
      {{ child-name }}
    &lt;/div&gt;
  &lt;/template&gt;
  
  
  &lt;script&gt;
  export default {
    name: 'Child',
    props: {
      child-name: String
    }
  }
  &lt;/script&gt;
  
  </code></pre>
  <p>Thanks y'all.</p>