How to group letters of alphabet and render to template in vue - vue.js

Question

I have a vuejs data like this:
new Vue({
el: "#app",
data() {
return {
alpha: [{
artist: "Aa"
}, {
artist: "Az"
},
{
artist: "Ab"
},
{
artist: "Ba"
},
{
artist: "Bb"
},
{
artist: "Bc"
},
{
artist: "Da"
},
{
artist: "Db"
}, {
artist: "Dc"
}, {
artist: "Dx"
},
]
}
}
})
What I want to do is simple to take the first letters of artist: A, B, C, D and create an array from them. After that I want to group all the artists by their index. So, the output would be:
A: (3) ["Aa", "Az", "Ab"]
B: (3) ["Ba", "Bb", "Bc"]
D: (4) ["Da", "Db", "Dc", "Dx"]
I can do this in my code, see below but the template isn't rendering it.
Here is the fiddle https://jsfiddle.net/fcas1wke/ for that works, you can see the console for the output

Answer 1

The array doesn't render because you are using non-numeric indexes on your array. This is described in more detail here, but basically non-numeric indexes can't be iterated over so they won't appear in the output.
A more standard way to handle this would be to use an object instead of an array. Here's a working version of your component:
Vue.component("alphabets", {
props: ['data'],
computed: {
stack() {
const result = {};
this.data.forEach(function(element) {
if (Array.isArray(result[element.artist[0]])) {
result[element.artist[0]].push(element.artist);
} else {
result[element.artist[0]] = [element.artist];
}
});
return result;
},
},
template: `<div>{{ stack }}</div>`,
});
Note this version uses a computed property instead of modifying the component's state on created.