vue中调用highlight.js的问题，请指教？

Question

先贴代码

<meta>
    <link rel="stylesheet" href="{% static 'js/highlight/src/styles/monokai.css' %}">
    <link rel="stylesheet" href="{% static 'js/highlight/src/styles/default.css' %}">
    <script type="text/javascript" src="{% static 'js/highlight/src/highlight.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/marked.js' %}"></script>
</meta>

...

<!-- body中 -->
<div v-html='compiledMarkdown'></div>

...

<script>
    // Vue.directive('highlightjs', function() {
    //     let blocks = this.el.querySelectorAll('pre code');
    //     Array.prototype.forEach.call(blocks, hljs.highlightBlock);
    // });
    marked.setOptions({
        renderer: new marked.Renderer(),
        gfm: true,
        tables: true,
        breaks: true,
        pedantic: false,
        sanitize: false,
        smartLists: false,
        smartypants: false,
        highlight: function (code) {
          return hljs.highlightAuto(code).value;
        }
    });
    var vm = new Vue({
        el: '#app',
        data : {
            title: '',
            article: {
                title: '',
                detail: '',
                update_time: '',
                tags: ''
            }
        },
        created: function () {
            this.getArticle();
        },
        methods: {
            getArticle: function () {
                var self = this;
                var url = window.location.pathname;
                reqwest({
                    url: `/api${url}`,
                    type: 'json',
                    method: 'get',
                    success: function (response) {
                        self.article.title = response.title;
                        self.article.detail = response.detail;
                        self.article.update_time = response.update_time;
                        self.article.tags = response.tags;
                        document.title = response.title;
                    }
                })
            }
        },
        computed: {
            compiledMarkdown: function () {
                return marked(this.article.detail)
            }
        }
    })
</script>

后端返回md格式，在前端渲染
可是发现渲染时语法并没有高亮，是加载的文件错了吗？
查看DOM只是返回<pre><code>...</code></pre>这样的内容
正常使用highlight.js渲染出来的应该是带class="hljs"这样的标签的不是吗？
想问是不是加载顺序出了问题，highlight在数据获取的之前就渲染，导致的失效呢？