Как установить meta og: изображение после запроса axios (VueJs)?

Question

У меня есть компонент VUE, который сразу после загрузки отправляет запрос Axios. Также я использую vue-social-share и мне нужна мета og:image, но мое изображение возвращается после ответа axios.

<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>

как вы можете видеть, prop 'collageSrc' становится доступным после запроса axios. Как я могу динамически включить эту опору в метаданные: изображения?

Answer 1

Определить metaInfo как функция, а не как объект:

metaInfo() {
  return {
    meta: [
      { vmid: 'og:image', property: 'og:image', content: this.collageSrc }
    ]
  }
}

https://vue-meta.nuxtjs.org/faq/component-props.html