title: How to pass object data from parent to child components?
body: <p>I would like to know how to make the contents object visible in the video.vue component.</p>
  
  <p>This is the <strong>Video.vue</strong> components. This component is where I want to access the content object that is defined in the <strong>Home.vue</strong> component. </p>
  
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;h1&gt;{{title}}&lt;/h1&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
     export default {
       data() {
         return {
             title: 'Video Section'
         }
       }
     }
  &lt;/script&gt;
  </code></pre>
  
  <p>This is the <strong>Home.vue</strong> component:</p>
  
  <pre><code>   &lt;template&gt;
          &lt;div class="container"&gt;
              &lt;div class="column is-one-third" v-for="content in contents.results" :content="content" :key="content.id"&gt; 
                  &lt;div v-show="loaded" class="loader"&gt;&lt;/div&gt;
                  &lt;div class="card" &gt;
                      &lt;div class="card-image"&gt;
                          &lt;figure class="image"&gt;
                              &lt;img :src="imageUrl + content.backdrop_path" alt="Image"&gt;
                          &lt;/figure&gt;
                      &lt;/div&gt;
                      &lt;div class="card-content"&gt;
                          &lt;div class="media"&gt;
                              &lt;div class="media-left"&gt;
                                  &lt;figure class="image is-25x25"&gt;
                                      &lt;img id="poster-image" :src="imageUrl + content.poster_path" alt="Image"&gt;
                                  &lt;/figure&gt;
                              &lt;/div&gt;
                              &lt;div class="media-content"&gt;
                                  &lt;p id="movie-title" class="title is-4 no-padding"&gt;{{content.original_title}}&lt;/p&gt;
                                  &lt;p&gt;&lt;span class="title is-6"&gt;&lt;i class="fas fa-star"&gt;{{" " + content.vote_average}}&lt;/i&gt;&lt;/span&gt;&lt;/p&gt;
                                  &lt;p class="subtitle is-6"&gt;&lt;i  class="fas fa-calendar-alt"&gt;{{" " + content.release_date}}&lt;/i&gt;&lt;/p&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="content"&gt;
                              {{ content.overview }}
                              &lt;div class="background-icon"&gt;&lt;span class="icon-twitter"&gt;&lt;/span&gt;&lt;/div&gt;
                          &lt;/div&gt;
  
                          &lt;div id="footer-card-icons"&gt;
                              &lt;a href="#"&gt;&lt;i class="fas fa-info-circle"&gt;&lt;/i&gt;&lt;/a&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/template&gt;
  
      &lt;script&gt;
         export default{
            data: () =&gt; ({
              contents: [],
              baseurl: 'https://api.themoviedb.org/3',
              apikey: '16667866c29ba1bc29e687b4892b8d5c',
              imageUrl: 'https://image.tmdb.org/t/p/w1280',
              loaded: true,
           }),
  
          created: function(){
             this.fetchData();
          },
  
          methods:{
            fetchData: function(){
              console.log('fetch data')
              this.$http.get(this.baseurl + '/discover/movie?api_key=' +
              this.apikey + '&amp;sort_by=popularity.desc').then(response =&gt;{
                  this.contents = response.body;
                  this.loaded = false;
              });
             }
          }
        }
   &lt;/script&gt;
  </code></pre>