Google Picker dialog vue component

GPicker.vue

<template lang="pug">
  div
    button.pronto-btn.add(disabled="true" ref="gAPIAuthBtn") Authenticate
    div(ref="gAPIResult")
</template>

<script>
export default {
  data() {
    return {
      API_KEY: "API_KEY_XXX",
      CLIENT_ID: "CLIENT_ID_XXX",
      SCOPE: "https://www.googleapis.com/auth/drive.readonly",
      PICKER_API_LOADED: false,
      OAUTH_TOKEN: null,
      GAPI_SCRIPT_URL: "https://apis.google.com/js/api.js",
    }
  },
  mounted() {
    const vm = this

    // if gapi is not loaded then load it in document head
    if (!window.gapi) {
      let s = document.createElement("script")
      s.src = vm.GAPI_SCRIPT_URL
      s.async = true
      s.onload = () => {
        vm.gAPILoadCallBack()
      }
      document.body.appendChild(s)
    }
    else { // if loaded then just call the callback
      vm.gAPILoadCallBack()
    }
  },
  methods: {
    gAPILoadCallBack() {
      const vm = this
      console.log("gapi load callback!")

      gapi.load('auth2', vm.onAuthAPILoad)
      gapi.load('picker', vm.onPickerAPILoad)
    },
    onAuthAPILoad() {
      const vm = this

      var authBtn = vm.$refs.gAPIAuthBtn
      authBtn.disabled = false
      authBtn.addEventListener('click', () => {
        gapi.auth2.authorize({
          client_id: vm.CLIENT_ID,
          scope: vm.SCOPE,
        }, vm.handleAuthResult)
      })
    },
    onPickerAPILoad() {
      const vm = this

      vm.PICKER_API_LOADED = true
      vm.createPicker()
    },
    handleAuthResult(authResult) {
      const vm = this

      if (authResult && !authResult.error) {
        vm.OAUTH_TOKEN = authResult.access_token
        vm.createPicker()
      }
    },
    createPicker() {
      const vm = this

      if (vm.PICKER_API_LOADED && vm.OAUTH_TOKEN) {
        const docsView = google.picker.ViewId.DOCS
        const multiSelection = google.picker.Feature.MULTISELECT_ENABLED
        let picker = new google.picker.PickerBuilder()
          .addView(docsView)
          .enableFeature(multiSelection)
          .setOAuthToken(vm.OAUTH_TOKEN)
          .setDeveloperKey(vm.API_KEY)
          .setCallback(vm.pickerCallback)
          .build()
        picker.setVisible(true)
      }
    },
    pickerCallback(data) {
      const vm = this

      let urls = []
      let docIDs = []
      if (data[google.picker.Response.ACTION] == google.picker.Action.PICKED) {
        const docs = data[google.picker.Response.DOCUMENTS]
        for (var i = 0; i < docs.length; i++) {
          urls.push(docs[i][google.picker.Document.URL])
          docIDs.push(docs[i][google.picker.Document.ID])
        }
      }
      let message = "You picked: "
      urls.forEach((u, index) => {
        message += `<br> ${index}. ${u}`
      })
      
      console.log(docIDs)

      vm.$refs.gAPIResult.innerHTML = message
    }
  }
}
</script>