VueJS：v-on：单击<按钮>时单击不起作用

Question

我有一个由NuxtJS配置的Vue应用。 我具有以下模板和工作方法，应在单击按钮时调用。但是他们没有被召唤。

<template>
    <button class="btn google-login" id="google-login" @click.native="googleLogin">
      <img src="~assets/google-icon.svg" alt />
      Login with Google
    </button>
</template>

<script>
import firebase from "firebase";
export default {
  data() {
    return {
      showPassword: false,
      checkbox1: false
    };
  },
  mounted: function() {
    console.log(firebase.SDK_VERSION);
  },
  methods: {
    googleLogin: function(event) {
      console.log('Reached inside the function');


      let googleProvider = new firebase.auth.GoogleAuthProvider();
      googleProvider.addScope(
        "https://www.googleapis.com/auth/contacts.readonly"
      );
      firebase.auth().useDeviceLanguage();
      console.log(googleProvider);
    }
  }
};
</script>

我在methods对象中有方法。我尝试了多种解决方案v-on:click，@click，@click.prevent，但似乎都无法解决