The code is NOT highlighted with parameters in component

Hello, In my laravel5.5/vuejs2.5 application I want to highlight some files and I have highlight.js installed with next in my package.json:

  "dependencies": {
    "highlight.js": "^9.12.0",

In my resources/assets/js/app.js I define route:

import SourceViewer from './components/lib/SourceViewer.vue';

...

const routes = [
    {
        path: '/',
        components: {
            ...
            sourceViewer: SourceViewer,
            ...
        }
     ...
     }   
    {path: '/admin/source_viewer/:filename/:ext', component: SourceViewer, name: 'sourceViewer'},
    ...

and the component itself resources/assets/js/components/lib/SourceViewer.vue :

<template>
   <section>

      <div class="panel-heading">
         <div v-if="message" class="text-danger col-xs-12">
            <center>{{ message }}</center>
         </div>
         source_filename::{{ source_filename }}<br>
         source_ext::{{ source_ext }}<br>


         <div>
            <pre><code class="php">{{ file_content }}</code></pre>
         </div>
      </div>

   </section>

</template>

<script>
    import appMixin from '../../appMixin';

    export default {

        data: function () {
            return {

                source_filename: 'app/Http/Controllers/DashboardController.php',
                source_ext: 'php',

                file_content: '',
                message: '',
            }
        }, // data: function () {

        mixins: [appMixin],

        created() {
        },

        mounted() {
            this.loadSourceFile()
        }, // mounted() {

        methods: {

            loadSourceFile() {
                this.message = '';

                var filename = this.$route.params.filename
                var ext = this.$route.params.ext

                console.log(typeof filename)
                console.log(typeof ext)

                if (typeof filename != 'undefined' && typeof ext != 'undefined') {
                    this.source_filename = filename.toString()
                    this.source_ext = ext.toString()
                    console.log("PARAMETERS ARE CHANGED FROM URL filename::" + filename)
                    console.log("ext::" + ext)
                }
                console.log("parameters would be applied: this.source_filename::" + (this.source_filename) + "  this.source_ext::" + this.source_ext)
                axios.post(window.API_VERSION_LINK + '/get_source_file', {'src_file': this.source_filename, 'file_type': this.source_ext}).then((response) => {
                    this.file_content = response.data.file_content
                    this.message = ''

                    let hljs = require('highlight.js');
                    console.log("hljs::")
                    console.log(hljs)

                    hljs.initHighlightingOnLoad();     // https://www.laravel-vuejs.com/vue-js-syntax-highlighting-with-highlight-js/
                    console.log("after initLineNumbersOnLoad::")


                    this.showPopupMessage('The source of the file was loaded', 'success');
                }).catch((error) => {
                    this.is_page_updating = false
                    this.showPopupMessage('Error loading the source of the file.', 'error');
                    this.showRunTimeError(error, this);
                });


            }, // loadSourceFile() {

        }, // methods: {


    }


</script>

The thing is that when I call this component without filename parameter as:

<source-viewer ></source-viewer>

It works ok, file's content is retrieved, set to this.file_content var and the code highlighted. In this case default file set in source_filename variable is retrieved.

But I need to show different files in this component and setting filename as parameter :

    <router-link :to="{ name: 'sourceViewer', params: { filename: 'app/Http/Controllers/DashboardController.php', ext: 'php' } }" >Open</router-link>

page with url

http://local-tasks.com/admin/test#/admin/source_viewer/app%2FHttp%2FControllers%2FDashboardController.php/php

is opened, and I see that variables source_filename and source_ext are set with values in parameter and content of the file is uploaded. I see text in console :

PARAMETERS ARE CHANGED FROM URL filename::app/Http/Controllers/DashboardController.php
ext::php
parameters would be applied: this.source_filename::app/Http/Controllers/DashboardController.php  this.source_ext::php

so parameters were applied and file's content is applied , but the code is NOT highlighted at all ! I do not see the difference and why so? How to fix it? Thanks!