Почему объект буфера обмена навигатора не определен при размещении в heroku?

Question

Я использую объект буфера обмена навигатора для копирования текста в буфер обмена с помощью vuejs. Он работает нормально, пока не будет размещен локально, хостинг с помощью heroku возвращает navigator.clipboard как неопределенный. Кто-нибудь знает его обходной путь?

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")
} 

Результат в консоли при размещении на локальном сервере

inside copyclipboard method
201812_BBSR_RAI_VID_AS4567_1234
after writetext
inside write text

Результат в консоли при размещении в героку

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