simplified download button component for testing purpose

download_button.vue

<script>
import { mapActions, mapState } from 'vuex';
export default {
  name: 'DownloadButton',
  props: {
    cssClass: {
      type: String,
      required: true,
    },
    text: {
      type: String,
      required: true,
    },
    downloadingText: {
      type: String,
      required: true,
    },
    recordId: {
      type: String,
      required: true,
    },
    endpoint: {
      type: String,
      required: true,
    }
  },
  computed: {
    ...mapState(['isDownloading']),
    buttonText() {
      return this.isDownloading ? this.downloadingText : this.text;
    },
    iconCssClass() {
      return this.isDownloading ? 'fa-circle-notch fa-spin' : 'fa-cloud-download-alt';
    }
  },
  channels: {
    DownloadChannel: {
      connected() {
        console.log('I am connected.');
      },
      rejected() {},
      received(data) {
        if (data.url !== undefined) {
          window.location = data.url;
        }
      },
      disconnected() {
        console.log('I am disconnected.');
      },
    }
  },
  methods: {
    ...mapActions([
      'fetchDownloadUrl',
    ]),
    download() {
      // subscribe DownloadChannel
      this.$cable.subscribe({ channel: 'DownloadChannel', id: this.recordId });

      // after receive download url from server -> unsubscribe DownloadChannel
      // calling `unsubscribe` here for demonstrating the problem
      const vm = this;
      setTimeout(function(){
        vm.$cable.unsubscribe('DownloadChannel');
       }, 1000);
    }
  }
}
</script>

<template>
  <div>
    <button ref="downloadButton" :class="cssClass" @click="download" :disabled="isDownloading">
      <span><i class="fas fa-lg" :class="iconCssClass"></i></span>
      <span class="btn-inner--text">{{ buttonText }}</span>
    </button>
  </div>
</template>