How to import third party script into a component in NuxtJs2 ? Widget undefined

Question

I am trying to load and use Cloudinary's product gallery widget which is only available via a CDN (couldnt' find it as an npm module). The problem is that I get the following error in VSCODE for the cloudinary instance:

'cloudinary' is not defined.

What is the correct way to use this Cloudinary script in NuxtJs2?

Sandbox link: https://codesandbox.io/s/throbbing-tree-47pr0?file=/components/PostImage.vue

I tried to set it up like so in a component named PostImage.vue

<template>
  <div class="container">
    <div id="myGallery" ref="widget"></div>
  </div>
</template>

<script>
import "bootstrap/dist/css/bootstrap.min.css";
export default {
  head() {
    return {
      title: 'test',

      script: [
        {
          src: "https://product-gallery.cloudinary.com/all.js", //<--- load the cdn here??
          async: true,
          defer: true,
        },
      ],
    };
  },
  mounted() {
    this.loadWidget();
  },
  methods: {
    loadWidget() {
      const myGallery = cloudinary.galleryWidget({
        container: this.$refs.widget,
        cloudName: "demo",
        mediaAssets: [{ tag: "clock" }], // by default mediaType: "image"
      });
      myGallery.render();
    },
  },
};
</script>