Vueetify.js syntax highlighting with highlight.js

Modified to Vuetify by Hexodus from original by metachris.com

HTML

<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/default.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.2.0/styles/monokai-sublime.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script>
<script src="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css">
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

<template id="app">
  <v-sheet class="pa-8">
    <v-row justify="center">
      <v-col cols="12">
        <pre v-highlightjs>
          <code class="javascript">
          //Using the directive
            computed: {
                isAuthenticated () {
                    return this.$store.getters.isAuthenticated
                },
                isError () {
                    return this.$store.getters.isAuthError
                },
                errorText () {
                    return this.$store.getters.getAuthError
                }   
              }
        </code>
      </pre>
    </v-col>
      <v-col cols="12">
        <pre>
          <code class="javascript">
          //Without directive
            computed: {
                isAuthenticated () {
                    return this.$store.getters.isAuthenticated
                },
                isError () {
                    return this.$store.getters.isAuthError
                },
                errorText () {
                    return this.$store.getters.getAuthError
                }   
              }
        </code>
      </pre>
    </v-col>    
    </v-row>
  </v-sheet>
</template>

JavaScript

Vue.use(Vuetify);

Vue.directive('highlightjs', {
  deep: true,
  bind: function(el, binding) {
    // highlight all targets
    let targets = el.querySelectorAll('code')
    targets.forEach((target) => {
      // override this in case of binding 
      if (binding.value) {
        target.textContent = binding.value
      }
      hljs.highlightBlock(target)
    })
  },
})

new Vue({
  el: '#app',
  data: {},
})