How to set meta og:image after axios request (VueJs)? - vuejs2

Question

I have a vue component which immediately after download sends axios request.
Also i use vue-social-sharing and i need og:image meta, but my image returns after axios respond.
<template>
<div class="container">
<div v-if="collageSrc" class="col-md-12 collage">
<img class="img-responsive" :src="this.collageSrc"/>
<social-sharing>
<div>
<network network="facebook">
<i name="fa fa-facebook"></i> Facebook
</network>
<network network="twitter">
<i class="fa fa-twitter"></i> Twitter
</network>
</div>
</social-sharing>
</div>
<div class="col-md-12 collage" v-else>
<h1>Your image is preparing...</h1>
</div>
</div>
</template>
<script>
export default {
name: 'collage',
props:['id'],
data: function(){
return {
collageWaiter: this.getCollageSrc(),
collageSrc: '',
url : '',
}
},
metaInfo: {
title : 'Compliment Genarator Collage',
meta: [
{charset : 'utf-8'},
{
'vmid' : 'og:image',
'property' : 'og:image',
//'content' : this.collageSrc
}
]
},
methods:{
getCollageSrc(){
const self = this;
axios.get('/api/generate?id='+this.id)
.then(function(result){
self.collageSrc = result.data;
self.url = "http://compgen.ru/collage/" + self.id;
});
}
}
}
</script>
as you can see, prop 'collageSrc' becomes available after axios request. How can i dynamic include this prop to meta og:image ?

Answer 1

Define metaInfo as function, not as object:
metaInfo() {
return {
meta: [
{ vmid: 'og:image', property: 'og:image', content: this.collageSrc }
]
}
}
https://vue-meta.nuxtjs.org/faq/component-props.html