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

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

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

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

inside copyclipboard method
201812_BBSR_RAI_VID_AS4567_1234
after writetext
inside write text

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

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