作ろうとしたもの

ボタンを押したら、XMLHttpRequestをする

index.html

<html>
<head>
    <title>Index</title>

    <script src="https://www.gstatic.com/firebasejs/4.11.0/firebase.js"></script>
    <script>
        // Initialize Firebase
        var config = {
            /* API Keys */
        };
        firebase.initializeApp(config);
    </script>
    <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
    <link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet">
</head>
<body>
    <div id="app">
        <v-app id="inspire">
            <v-form v-model="valid" ref="form" lazy-validation>
                <v-btn 
                    @click="twitterLogin"
                    color="info"
                >TwitterLogin</v-btn>
                <button type="button"
                    v-on:click="login"
                    >
                    login
                </button>
            </v-form>
        </v-app>
    </div>

    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vuetify/dist/vuetify.js"></script>
    <script src=javascripts/index.js type="text/javascript"></script>

</body>
</html>

javascripts/index.js

var token = "";
var secret = "";

var example1 = new Vue({ 
    el: '#app',
    data: () => ({
       /* something */
    }),

    methods: {
        twitterLogin: function(){
            twitterLogin();
        },
        login: function (event) {
            login();
        }
    }
})

function twitterLogin() {
    firebase.auth().languageCode = 'ja';
    var provider = new firebase.auth.TwitterAuthProvider();
    firebase.auth().signInWithPopup(provider).then(function(result) {
        // This gives you a the Twitter OAuth 1.0 Access Token and Secret.
        // You can use these server side with your app's credentials to access the Twitter API.
        token = result.credential.accessToken;
        secret = result.credential.secret;
        // The signed-in user info.
        var user = result.user;
        // ...
      }).catch(function(error) {
        // Handle Errors here.
        var errorCode = error.code;
        var errorMessage = error.message;
        // The email of the user's account used.
        var email = error.email;
        // The firebase.auth.AuthCredential type that was used.
        var credential = error.credential;
        // ...
      });
}

function login() {
    var user = firebase.auth().currentUser;
    var screemName = "";
    if (user != null) {
        user.providerData.forEach(function (profile) {
            screemName = profile.displayName;

          console.log("Sign-in provider: "+profile.providerId);
          console.log("  Provider-specific UID: "+profile.uid);
          console.log("  Name: "+profile.displayName);
          console.log("  Email: "+profile.email);
          console.log("  Photo URL: "+profile.photoURL);
        });



        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function() {
            switch ( xhr.readyState ) {
                case 4: // データ受信完了.
                    if( xhr.status == 200 ) {
                        var data = xhr.responseText;
                        console.log( 'COMPLETE! :'+data );
                    } 
                    break;
            }
        };
        xhr.open( 'GET', "url", true );
        xhr.send();
    }
}

ハマったところ

FirebaseのTwitter認証を利用しています。認証の際、ユーザーは認証画面に飛ばされます。
問題だったのは、XMLHttpRequestをする時です。コードの通り、<button>をクリックするとlogin()メソッドが呼ばれます。
このボタンを<v-btn>にするとうまく動いてくれませんでした。エラー内容はDOMに関することでした。
~~公式ドキュメントにもありましたが、こういうことするときは普段通り<button>を使ってくれとのことでした。~~
※上のドキュメントのリソースを検索中です

おまけ

<button type="button"...とtypeを指定しているのは、指定しないとなぜかChromeではリロードされるためです。

【追記】自分なりの解決方法

<v-btn>を<div>で囲んで、<div>にクリックイベントを設定する

<div @click="twitterLogin"><v-btn dark color="info">TwitterLogin</v-btn></div>

[Vue.js]<v-btn>と<button>の使い分け

作ろうとしたもの

ハマったところ

おまけ

【追記】自分なりの解決方法