vuejs rendering async function in template displays promise instead of returned data
That is because async function returns a native promise, so the loadProfilePic method actually returns a promise instead of a value. What you can do instead, is actually set an empty profile pic in obj, and then populate it in your loadProfilePic method. VueJS will automatically re-render when the obj.profilePic is updated.
<div v-for="i in obj"> {{ i.profilePic }}</div>loadProfilePic: async function(id) { var pf = await this.blockstack.lookupProfile(id); this.obj.filter(o => o.id).forEach(o => o.profilePic = pf);}See proof-of-concept below:
new Vue({ el: '#app', data: { obj: [{ id: 1, profilePic: null }, { id: 2, profilePic: null }, { id: 3, profilePic: null }] }, methods: { loadProfilePic: async function(id) { var pf = await this.dummyFetch(id); this.obj.filter(o => o.id === id).forEach(o => o.profilePic = pf.name); }, dummyFetch: async function(id) { return await fetch(`https://jsonplaceholder.typicode.com/users/${id}`).then(r => r.json()); } }, mounted: function() { this.obj.forEach(o => this.loadProfilePic(o.id)); }});<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script><div id="app"> <div v-for="i in obj"> {{ i.profilePic }} </div></div>