the code is as follows:

<no-ssr placeholder="" v-highlight>
      
{{mycode}}<code style="atom-one-dark" :class="myCodeClass">{{mycode}}
< / 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);

        },

    });

when the variable mycode is updated, the {{mycode}} in html is updated in real time. But the code displayed by highlightjs is still the old code, how to solve it?