title: Avoid new axios request each time vue component is rendered
body: <p>I'm very much new to Vue so please excuse my lack of knowledge here.</p>
  
  <ol>
  <li><p>In one of my (child) components <code>(Product_Collection.vue)</code> I make an axios request to get some products from my Shopify store via their GraphQL API:</p>
  
  <pre><code>data: () =&gt; {
   return {
     products: null
   }
  },
  methods: {
   getProducts: function(){
     // 1. axios code here...
     // 2. ...then assign result to "this.products" data property 
   }
  }
  </code></pre></li>
  <li><p>The products are displayed as thumbnails (let's say there's 10 t-shirts). I then click a product to view it in more detail with more product info and images etc (very much an Amazon-like experience).</p></li>
  <li><p>The product is shown on it's own in a <code>Product_Single.vue</code> component. So far so good.</p></li>
  </ol>
  
  <p>But here's the problem...</p>
  
  <ol start="4">
  <li>When I click back to the products page <code>(Product_Collection.vue)</code> (the page with the 10 t-shirts on) the axios request to the Shopify API gets called again and the component is re-rendered from scratch.</li>
  </ol>
  
  <p>My question is how do I tell Vue to stop fetching the data from the Shopify API each time the component is rendered? Thank you</p>