title: VueJS display grouped array of objects
body: <p>I'm fetching a list of countries from the API and I want to display them in groups by subregion (continent). Like that:</p>
  
  <p><a href="https://i.stack.imgur.com/8tjMS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8tjMS.png" alt="enter image description here"></a></p>
  
  <p>API gives me a response which is an array of objects (countries) and for each object there is a key called 'subregion' - I want to group by that key.
  I use lodash for grouping, but maybe there is a Vue method I'm not familiar with.
  My JS code:</p>
  
  <pre><code>var app = new Vue({
    el: '#app',
  
    data: {
      countries: null,
    },
  
    created: function () {
      this.fetchData();
    },
  
    methods: {
      fetchData: function() {
        var xhr = new XMLHttpRequest();
        var self = this;
        xhr.open('GET', apiURL);
        xhr.onload = function() {
          var countryList = JSON.parse(xhr.responseText);
          self.countries = _.groupBy(countryList, "subregion");
        };
        xhr.send();
      },
    },
  });
  </code></pre>
  
  <p>And HTML:</p>
  
  <pre><code>&lt;li v-for="country in countries"&gt;
          {{ country.name }} (+{{ country.callingCodes[0] }})
  &lt;/li&gt;
  </code></pre>
  
  <p>How can I achieve what's in the picture?</p>