Why is the clipboard object of navigator undefined when hosted in heroku?

Question

I am using navigator's clipboard object to copy text into the clipboard using vuejs. It works fine till it is hosted locally, hosting using heroku returns navigator.clipboard as undefined. Does anyone know its workaround?

copyToClipboard(text){
    console.log("inside copyclipboard method")
    console.log(text)
    navigator.clipboard.writeText(text).then(function() {
        console.log("inside write text")
        this.showSuccessfulClipboardCopySnackBar = true
    }.bind(this))
    console.log("after writetext")
} 

Result in console when hosted in local server

inside copyclipboard method
201812_BBSR_RAI_VID_AS4567_1234
after writetext
inside write text

Result in console when hosted in heroku

inside copyclipboard method
201812_BBSR_RAI_VID_AS4567_1234
** Uncaught TypeError: Can not read property 'writeText' of undefined. **