代码如下：

<no-ssr placeholder="加载中" v-highlight>
      <pre>{{mycode}}<code style="atom-one-dark" :class="myCodeClass">{{mycode}}</code></pre>
    </no-ssr>

const hljs = require('highlight.js');

    Vue.directive('highlight', {

        

        inserted: el => {

            let blocks = el.querySelectorAll('pre code');

            blocks.forEach( (block) => {
                hljs.highlightBlock(block);
            });

            console.log('test1');

        },

        componentUpdated: el => {

            let blocks = el.querySelectorAll('pre code');

            blocks.forEach( (block) => {
                hljs.highlightBlock(block);
            });

            console.log('test22', blocks);

        },

    });

当mycode这个变量更新的时候，html里面的{{mycode}}是实时更新的。但是highlightjs显示的代码依然还是旧的代码，如何解决呢？