vue.jsでコードをハイライトしたい。
しかし、動的に取得したデータをハイライトできない。

cdn から直接読み出し、ハイライトする方法を取る。

vue.blade


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script>

以下の感じ。
getProfileでソースコード code タグ入りのHTMLを読み込むような。

hoge.vue


<style>

</style>

<template>
    <div>
        <div v-html="post"></div>
    </div>
</template>


<script>

    export default {

        data () {
            return {

                post:''
            };
        },

        created(){
            this.getProfile();
        },


        methods: {


            highlight() {
                document.querySelectorAll('code').forEach((block) => {
                    hljs.highlightBlock(block)
                })
            },

            getProfile(){


                let dataform = new FormData();
                dataform.append('screen_name',this.$route.params.screen_name);

                axios.post('/profile/view/', dataform).then(e => {

                    this.post = e.data.res.profile.body;
                    this.$nextTick(() => {
                        this.highlight();
                    })

                }).catch((error) => {

                    console.log(error);
                    console.log("プロフィール読み込みエラー");
                });
                //


            },
        }
    }
</script>