gapi.client.init promise fails silently

[insomniac807]

This might be a bug with gapi itself rather than this script but I'll drop this here anyway. Possible duplicate here.

import {
    gapi
} from 'gapi-script';
import oauth2Keys from './oauthKeys.json';
const APIKEYS = oauth2Keys.web;
const DISCOVERY_DOCS = ['https://www.googleapis.com/discovery/v1/apis/youtube/v3/rest'];
const SCOPES = ["https://www.googleapis.com/auth/youtube.readonly", "https://www.googleapis.com/auth/youtube"];

//im building a vuejs3 application
mounted() {
    gapi.load('client:auth2', this.initClient);
},
    data() {
        return {
            GOOGLEAUTH: null
        }
    },
    methods: {
        initClient() {
            var self = this;
            console.log("initialising client...");
            gapi.client.init({
                discoveryDocs: DISCOVERY_DOCS,
                clientId: APIKEYS.client_id,
                scope: SCOPES
            }).then(function () {
                console.log(self);
                //listen for sign-in state changes
                self.GOOGLEAUTH = gapi.auth2.getAuthInstance();

                console.log("googleauth is....");
                console.log(self.GOOGLEAUTH);

                self.GOOGLEAUTH.isSignedIn.listen(self.updateSigninStatus);
                // Handle initial sign-in state. (Determine if user is already signed in.)
                self.updateSigninStatus(self.GOOGLEAUTH.currentUser.get());
            });
        }
}

Console logs in the promise callbacks not running. this.GOOGLEAUTH returning undefined in subsequent code. If I remove the clientid and scope params, the console logs run but this.GOOGLEAUTH still returning undefined.