rails + Vue.js(axios)でtoken認証をすると401errorが返ってくる

rails6でdevise-token-auth+Vue.jsを用いてtoken認証を試しております。
またelemet UIも使っております。
railsサーバーのログイン処理自体はしっかり機能しており、Postmanの様なAPIクライアントを使いPOSTするとしっかり200と認証トークンが返ってきます。
しかしVueで書いたformからpostすると401 unauthorizedが返ってきて認証処理が上手くいきません。
以下が該当の画像、そしてVueの単一コンポーネントと、そのエラーです。

/* app/javascript/login.vue */
<template>
    <div id="login">
        <el-form ref="form" :model="form">
            <el-form-item label="メールアドレス" prop="email">
                <el-input type="text" v-model="form.email" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="パスワード" prop="password">
                <el-input type="password" v-model="form.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-button type="primary" @click="onSubmit" >ログイン</el-button>
        </el-form>
    </div>
</template>

<script>
import axios from 'axios';
axios.defaults.headers.common = {
    'X-Requested-With': 'XMLHttpRequest',
    'authenticity_token' : document.querySelector('meta[name="csrf-token"]').getAttribute('content')
};

export default{
    data: function() {
        return{
            form: {
                email: '',
                password: ''
            }
        }
    },
    methods: {
        onSubmit: function() {
            axios
                .post('/api/v1/auth/sign_in.json', {
                        email: this.email,
                        password: this.password,
                })
                .then(response => {
                    let project = response.data;
                    console.log(project);
                })
        }
    }
}
</script>

 POST http://localhost:3000/api/v1/auth/sign_in 401 (Unauthorized)
 createError.js:17 Uncaught (in promise) Error: Request failed with status code 401

401エラーが返ってきているということで、認証する上で情報に過不足があると思われます。
まず一つ気になっていることが、以上の書き方で正しくformに書いたmail, passwordが正しく取れているか、正しく設定できているかということです。
正しくformの値を取得できていないことでnullの値を送っているのではないかと考えています。

またもう一つは、CSRF Tokenを正しくheaderにつけてpostできているかということで、railsのerbテンプレート内でvueを展開しているのでCSRF Tokenを取得し、それをヘッダーにつける処理を書いているのですが

axios.defaults.headers.common = {
    'X-Requested-With': 'XMLHttpRequest',
    'authenticity_token' : document.querySelector('meta[name="csrf-token"]').getAttribute('content')
};

authenticity_tokenというプロパティ？の名前が正しいか、またヘッダーに付ける方法が間違っているかもしれないという懸念があります。
わかり辛くて恐縮ですが、何故401エラーが返ってくるかお分かりになる方はいらっしゃいますでしょうか？
過不足な情報等ございましたらご遠慮なくおっしゃっていただけると幸いです。
よろしくお願いします。