title: How to combine multiple Vue JS instances (associated with multiple html divs) using Vue JS?
body: <p>So basically I have two HTML divs (vueapp1 and vueapp2) that do the same thing (they just spit out information and each one is associated with its own Vue instance that allows for reading in JSON for spitting out info).</p>
  
  <p>i.e the HTML:</p>
  
  <pre><code>&lt;div id="vueapp1"&gt;
  
      &lt;div class="testleft panel-pane-ticket pane-views-panes rounded" v-
      for="result in results.slice(0,3)"&gt;
          &lt;div class="odd"&gt;
              &lt;div class="ticketcustomer" &gt;{{ result.Customer}}&lt;/div&gt;
          &lt;/div&gt;
          &lt;....more html.../&gt;
  &lt;/div&gt; &lt;!--End vueapp1&gt;
  </code></pre>
  
  <p>With the VueJS code to read in the JSON as:</p>
  
  <pre><code>    const vuemaster1 = new Vue({
      el: '#vueapp1',
      data: {
          results: []
      },
      mounted() {
          var self = this
          axios.get('https://api.myjson.com/bins/hfpwh')
          .then(function (response) {
              console.log(response);
              self.results= response.data;
          })
  
          .catch(function (error) {
              console.log(error);
          });
      }
  });
  </code></pre>
  
  <p>As of right now, these two pieces of code are being repeated twice in one html file. Is there any way to combine them using Vue Components? I've read up on them but I'm a newbie so any help would be appreciated!</p>