Cannot read property during Mounted hook -- how to set up?

Question

I am using the mounted hook to load a function called .replaceIMG() during page load, but I get the following error in console:

Error in mounted hook: "TypeError: Cannot read property 'replaceIMG' of undefined"

Here's my Single file component .vue template:

First, I imported a node module package called UTIF.js (this plugin allows browsers to render TIF files in browser!) like so:

const UTIF = require('utif/UTIF');

Then, in the Vue instance I have:

  mounted: function() {
    this.UTIF.replaceIMG();
  }

The <template> section contains this:

<div v-for='(image,index) in images' :key='index'>
            <a :href='imageLink + image.Graphic'>
                <img :src='imageLink + image.Graphic'>
            </a>
</div>

Full code here: https://gist.github.com/dosstx/5dbe76220a3126cb84f7ed12c610015c

Did I not require the package correctly into my VUE template? Thank you.

Answer 1

I had to remove this from

mounted: function() {
    this.UTIF.replaceIMG();
}

to

mounted: function() {
    UTIF.replaceIMG();
}