MetamaskConnectWidget.vue

<script>
import Web3 from 'web3'

export default ({
  data() {
    return {
      buttonDisabled: false,
      buttonInstallText: "Click here to install Metamask",
    }
  },

  methods: {

    performAction() {
      if (this.isMetaMaskInstalled()) {
        this.connectToMetamask()
      } else {
        // Redirect to metamask install page
        if(process.client){ window.open('https://metamask.io/'); }
      }
    },

    //Check if MetaMask extension is installed
    isMetaMaskInstalled() {
        //Have to check the ethereum binding on the window object to see if it's installed
        if(process.client){
          return Boolean(this.$store.getters['metamask/ethereum'] && this.$store.getters['metamask/ethereum'].isMetaMask);
        }
        return false
    },

    async checkIfUserRegistered(address) {
      const response = await this.$axios.$get('/users/' + address)
      // Handle response
      if (response === address) {
        return true
      } else {
        return this.registerUser(address)
      }
    },

    async registerUser(address) {
      const response = await this.$axios.post('/users/register', {
        address: address,
      })
      console.log('Register user response: ' + response)
    },

    handleSignMessage(publicAddress, nonce) {
      // Define instance of web3
      var web3 = new Web3(window.ethereum)
      return new Promise((resolve, reject) =>
        web3.eth.personal.sign(
          web3.utils.fromUtf8(`Nonce: ${nonce}`),
          publicAddress,
          (err, signature) => {
            if (err) return reject(err);
            return resolve({ publicAddress, signature });
          }
        )
      );
    },

    async connectToMetamask() {
      try {
        // Connect to metamask and get user accounts
        const accounts = await this.$store.getters['metamask/ethereum'].request({ method: 'eth_requestAccounts' });
        
        // Update vuex store
        this.$store.commit('metamask/setMetamaskConnected', true)
        this.$store.commit('metamask/setAccounts', accounts)

        // Check if user is registered, if not, register them
        const isRegistered = await this.checkIfUserRegistered(accounts[0])

        // Request nonce from backend
        const responseNonce = await this.$axios.get('/users/' + accounts[0] + '/nonce')
        const nonce = responseNonce.data

        // Sign message
        const signedMessage = await this.handleSignMessage(accounts[0], nonce)

        // Send signature to backend
        const responseSign = await this.$axios.post('/users/' + accounts[0] + '/signature', signedMessage)

        // Set token in store
        this.$store.commit('metamask/setToken', responseSign.data.token)

        // If successful, redirect to home
        if (responseSign.status === 200) {
          this.$router.push('/')
        }
      } catch (error) {
        console.log(error)
      }
    }
  }
})
</script>

Replied in reddit thread:
https://www.reddit.com/r/vuejs/comments/tcsk41/cant_connect_metamask_to_vuevuex_project/