title: How does one run code in a Vue component only once per page (when more than one of the same component exists on that page)?
body: <p>So I have a Vue component which has two functions.  One attaches some data and populates various tags with that data, another gets the data from a json file and parses through it - applying it to the other function.</p>
  
  <p>(pseudo-code ahead!)</p>
  
  <pre><code>mounted: function() {
    function listBuilder(data) { some code }
    $.get("some-json"), function (data) {
      [some code...]
      listBuilder(data);
    }
  }
  </code></pre>
  
  <p>On the page itself, this component exists twice.</p>
  
  <pre><code>&lt;section&gt;
    &lt;my-component type="map"&gt;&lt;/my-component&gt;
  &lt;/section&gt;
  &lt;aside&gt;  
    &lt;my-component&gt;&lt;/my-component&gt;
  &lt;/aside&gt;
  </code></pre>
  
  <p>One component renders out the data in map form, while the other renders it out as a list.  This all works just fine &amp; dandy, except that on the map the data is rendered 2x - because, as you might have guessed, the component's logic is run twice - getting the json twice and processing it twice.</p>
  
  <p>Is there a native "Vue" way to have (or designate) the code in the component to only run once on a page?  I have a rather (in my opinion), hacky way of avoiding this right now, by applying a property to one of the components ("dumb"), that essentially skips some of the logic via a check if that property exists.  I feel there has got to be a more elegant and native way to handle this, however, but have come up dry in my google searches.</p>