Vue.jsコンポーネントで関数の呼び出しの際のis not a functionエラー

Laravel8
Vue.jsを勉強しています。

コンポーネントのVue.jsで以下のようなエラーが出ます。
アドバイスいただけますと幸いです。

このようなシンプルなフォームです。

しかし、送信するボタンをクリックしてもうんともすんとも言いません。

コンポーネントファイル

<template>    
    <div>    
        <input type="hidden" name="_token" v-bind:value="this.csrf">
        <label for="exampleInputEmail1">お名前</label>
        <input type="test" class="form-control col-sm-5" id="card-holder-name" required v-model="Form.cardHolderName">
        <label for="exampleInputPassword1">カード番号</label>
        <div class="form-group MyCardElement col-sm-5" id="card-element"></div>
        <div id="card-errors" role="alert" style='color:red'></div>
        <button            
            class="btn btn-primary" id="card-button"
            @click="subscribe"
        >送信する</button>
    </div>
</template>

<script>
    import {loadStripe} from '@stripe/stripe-js';
    export default {
        props: {
            csrf: String,
            dataSecret: Object,
            publicKey: Object,
        },
        data() {
            return {
                stripe: null,
                stripeCard: null,
                Form: {
                    cardHolderName: null,
                },                
            }
        },
        async mounted() {
            this.stripe = await loadStripe(this.publicKey.value);            
            const elements = this.stripe.elements();
 
            var style = {
            	base: {
                color: "#32325d",
                fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
                fontSmoothing: "antialiased",
                fontSize: "16px",
                "::placeholder": {
                  color: "#aab7c4"
                }
              },
              invalid: {
                color: "#fa755a",
                iconColor: "#fa755a"
              }
            };
            
            this.stripeCard = elements.create('card', {style: style, hidePostalCode: true});
            this.stripeCard.mount('#card-element');
             
            this.stripeCard.on('change', function(event) {
              var displayError = document.getElementById('card-errors');
              if (event.error) {
                displayError.textContent = event.error.message;
              } else {
                displayError.textContent = '';
              }
            });
            
        },
        methods: {
            subscribe: async function() {
                
                const paymentMethod = await this.getPaymentMethod();
                const url = 'subscribe';
                const params = {
                    payment_method: paymentMethod,
                };
                axios.post(url, params)
                    .then(response => {

                        location.reload();

                    });               
            },          
        getPaymentMethod: async function() {
            const clientSecret = this.dataSecret.value;
            alert('①_2dataSecretの値' + clientSecret);
            alert('②_2ホルダーネーム' + this.Form.cardHolderName)
            const { setupIntent, error } = await this.stripe.confirmCardSetup(
                clientSecret, {
                    payment_method: {
                        card: this.stripeCard,
                        billing_details: { name: this.cardHolderName }
                    }
                }
            );

            if (error) {

                console.log(error);

            } else {

                return setupIntent.payment_method;

            }
        },
    }

</script>

送信するボタンをクリックした時に出るエラー（F12で確認）

[Vue warn]: Error in v-on handler (Promise/async): "TypeError: this.getPaymentMethod is not a function"

found in

---> <StripeForm2> at resources/js/component/StripeForm2.vue
       <Root>