title: data between component vueJS2 with webpack template
body: <p>I have a problem and I can not find the solution on the internet.
  I am learning to use vueJS2 with the webpack template.
  I need to retrieve the data from an API</p>
  
  <pre><code>&lt;template&gt;
  &lt;div id="app"&gt;
    &lt;div class="navbar"&gt;
      &lt;div class="container"&gt;
        &lt;img src="../src/assets/pictures/logo.png" alt="logo antadis" class="mx-auto d-block"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;myCard/&gt;
  &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import myCard from './components/my-card'
  import axios from 'axios'
  
  export default {
    name: 'App',
    components: {
      myCard
    },
    data() {
      return {
        posts: [],
        errors: []
      }
    },
    created() {
      axios.get(`https://cors.io/?http://csc_k9gko.recrutement.uize.fr/api/product.json`)
        .then(response =&gt; {
          this.posts = response.data
        })
        .catch(e =&gt; {
          this.errors.push(e)
        })
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>the problem being that I have to use the API data in several other components. 
  For example this one</p>
  
  <pre><code>&lt;template&gt;
  &lt;div class="myCard card fullSize ml-auto mr-auto container-fluid"&gt;
    &lt;div class="card-body"&gt;
      &lt;div class="row justify-content-around"&gt;
        &lt;myCardLeft/&gt;
        &lt;myCardRight/&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import myCardLeft from './layout/my-card-left'
  import myCardRight from './layout/my-card-right'
  export default {
    name: 'myCard',
    components: {
      myCardLeft,
      myCardRight
    }
  }
  &lt;/script&gt;
  
  &lt;style scoped&gt;
  .fullSize {
    width: 80%;
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>But also other components kids ... I found information about vux or doing a class but without results.
  I thank you in advance for your invaluable help.</p>