nuxt.js - Script cannot set innerHTML, though I am using a callback and v-if to ensure availability

Question

I have a script that I'm using without issues in a static HTML page. For some reason, I can't get it to work in a Nuxt project.

The HTML is in a component and within the page I have the following:

<template>
<div v-if="isScriptLoaded">
  <ComponentA />
  </div>
</template>

<script>
import ComponentA from "@/components/ComponentA";

export default {
    components: {
        ComponentA
    },
    data () {
    return {
        isScriptLoaded: false
    }
    },
    head () {
    return {
        title: 'My awesome project',
        script: [
        {
            hid: 'script',
            src: 'https://scripturl.com/js/main.js',
            defer: true,
            // Changed after script load
            callback: () => { this.isScriptLoaded = true } 
        }
        ]
    }
    }
}
</script>

When I load the page, the console shows:

VM4731 main.js:1 Uncaught TypeError: Cannot set property 'innerHTML' of undefined

question from:https://stackoverflow.com/questions/65912621/script-cannot-set-innerhtml-though-i-am-using-a-callback-and-v-if-to-ensure-ava

Answer 1

Trying to add wrapper before v-if conditional.

Example :

<div>
 <div v=if="conditional">
   <Component/>
 </div>
</div>