Nuxt.js项目中使用脚本回调与v-if仍报无法设置innerHTML错误

两个时序错位的问题叠加触发异常：

• Nuxt的head配置中，script标签参数仅支持框架内置的固定字段，你自定义的callback字段不会被识别执行，对应的状态修改逻辑永远不会触发，isScriptLoaded始终停留在初始的false值
• 通过head注入的带defer属性的第三方脚本，会在页面文档解析完成后自动执行，这个时候因为isScriptLoaded一直为false，受v-if控制的ComponentA根本没有挂载到页面DOM中，脚本需要操作的目标节点不存在，尝试给undefined的节点设置innerHTML就会抛出对应类型错误。

• 移除head配置中无效的callback自定义参数，同时把原本通过head全局注入的第三方脚本配置删掉，避免脚本被框架提前加载执行
• 在组件的客户端mounted生命周期钩子里，手动创建第三方脚本实例，监听原生的脚本onload加载完成事件，等脚本全部就绪后再把isScriptLoaded设为true，触发ComponentA的渲染
• 调整执行顺序逻辑：必须保证脚本要操作的目标DOM提前挂载完成后，再触发脚本执行，避免出现“脚本先跑、DOM后渲染”的时序颠倒
• 可参考的完整修正后代码：

<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'
    }
  },
  mounted() {
    // 仅在客户端执行脚本加载，避免服务端环境找不到document对象报错
    const externalScript = document.createElement('script')
    externalScript.src = 'https://scripturl.com/js/main.js'
    externalScript.defer = true
    // 原生支持的加载完成回调，替代无效的自定义callback
    externalScript.onload = () => {
      this.isScriptLoaded = true
    }
    document.body.appendChild(externalScript)
  }
}
</script>

内容的提问来源于stack exchange，提问作者majordomo