A Facebook Login button Single File Component done in VueJS

FacebookLogin.vue

<template>
  <div>
    <button class="button" @click="logInWithFacebook"> Login with Facebook</button>
  </div>
</template>
<script>
export default {
  name:"facebookLogin",
  methods: {

    async logInWithFacebook() {
      await this.loadFacebookSDK(document, "script", "facebook-jssdk");
      await this.initFacebook();
      window.FB.login(function(response) {
        if (response.authResponse) {
          alert("You are logged in &amp; cookie set!");
          // Now you can redirect the user or do an AJAX request to
          // a PHP script that grabs the signed request from the cookie.
        } else {
          alert("User cancelled login or did not fully authorize.");
        }
      });
      return false;
    },

    async initFacebook() {
      window.fbAsyncInit = function() {
        window.FB.init({
          appId: "8220179XXXXXXXXX", //You will need to change this
          cookie: true, // This is important, it's not enabled by default
          version: "v13.0"
        });
      };
    },

    async loadFacebookSDK(d, s, id) {
      var js,
        fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) {
        return;
      }
      js = d.createElement(s);
      js.id = id;
      js.src = "https://connect.facebook.net/en_US/sdk.js";
      fjs.parentNode.insertBefore(js, fjs);
    }
  }
};
</script>
<style>
.button{
  color:white;
  min-width: 150px;
  background-color: #000000a1;
  height: 2.5rem;
  border-radius: 2rem;
  font-weight: 400;
  font-size: 0.8rem;
}

</style>

yes, you can refer back to my edited answer above @asadmmn :)

im having the same issue like @asadmmn . cannot read properties of undefined... etc

edited: okay, found the issue you will need to return the promises

async loadFacebookSDK(d, s, id) {
      return new Promise((resolve, reject) => {
        let js,
          fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) {
          return;
        }
        js = d.createElement(s);
        js.id = id;
        js.src = "https://connect.facebook.net/en_US/sdk.js";
        fjs.parentNode.insertBefore(js, fjs);
        js.onload = resolve;
        js.onerror = reject;
      });
    },
async initFacebook() {
      return new Promise((resolve) => {
        window.fbAsyncInit = function () {
          window.FB.init({
            appId: "your-app-id",
            cookie: true, // enable cookies to allow the server to access
            xfbml: true, // parse social plugins on this page
            version: "v16.0",
          });
          resolve();
        };
      });
    },