javascript - variable still not defined even after adding external JS in VUE component

Question

I am trying to import function marked from https://cdn.jsdelivr.net/npm/marked/marked.min.js. I have injected <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> by mount(). But it always throws an error [Vue warn]: Error in render: "ReferenceError: marked is not defined". Why it is not defined even after the script has been added?

<script>
export default {
  name: 'Upload',
  data () {
    return {
      title: '',
      content: ''
    }
  },
  mounted () {
    let externalScript = document.createElement('script')
    externalScript.setAttribute('src', 'https://cdn.jsdelivr.net/npm/marked/marked.min.js')
    Plugin.async = true
    document.head.appendChild(externalScript)
  },
  computed: {
    markdown2html: function () {
      return marked(this.content)
    }
  }
}
</script>

question from:https://stackoverflow.com/questions/65878192/variable-still-not-defined-even-after-adding-external-js-in-vue-component

Answer 1

Okay I'm not familiar with Vue, I use React, but normally I would be able to add the script link in the index.html under public folder. Then when everything's built it will be there.

Best option I think would be to install it via npm - npm i marked, then import marked from 'marked' - why not do it this way?