Ionic Vue binding variable fail

hi all, I have a vue page as below. I tried to bind the variable ‘passcode’ and display in the page dynamically while user click on the card. But looks like it does not refresh the value in the page, though the value of the variable is changed already. Any idea pls? Thanks

<template>
    <ion-content class="ion-padding">
      <h1>Welcome</h1>
      <ion-nav-link router-direction="forward" :component="component">
        <ion-button>Login</ion-button>
      </ion-nav-link>
      <ion-grid>
        
        <ion-row>
            <ion-col size="2"></ion-col>
            <ion-col size="8">
                <ion-img style="height: 150px;" src="https://docs-demo.ionic.io/assets/madison.jpg" alt="The Wisconsin State Capitol building in Madison, WI at night"></ion-img>
            </ion-col>
        </ion-row>
        <ion-row>
            <ion-col size="2"></ion-col>
        </ion-row>
        <ion-row>
            <ion-col size="2"></ion-col>
            <ion-col size="8" style="text-align: center;">
                <ion-input readonly placeholder="000000" :value="passcode"></ion-input>
                {{passcode}}
            </ion-col>
        </ion-row>
        <ion-row style="align-items: center;">
            <ion-col size="2"></ion-col>
            <ion-col style="height: 40vh;" size="8">
                <ion-content>
                    <div  class="card-wrapper">
                        <ion-card style="background-color: #f0f0f0" @click="clickKeypad('1')">
                            <ion-card-content>
                                <ion-card-title style="margin-bottom: 12px; text-align: left;">
                                    1
                                </ion-card-title>
                            </ion-card-content>
                        </ion-card>
                        <ion-card style="background-color: #f0f0f0" @click="clickKeypad('2')">
                            <ion-card-content>
                                <ion-card-title style="margin-bottom: 12px; text-align: left;">
                                    2
                                </ion-card-title>
                            </ion-card-content>
                        </ion-card>
                        <ion-card style="background-color: #f0f0f0" @click="clickKeypad('3')">
                            <ion-card-content>
                                <ion-card-title style="margin-bottom: 12px; text-align: left;">
                                    3
                                </ion-card-title>
                            </ion-card-content>
                        </ion-card>
                        <ion-card style="background-color: #f0f0f0" @click="clickKeypad('4')">
                            <ion-card-content>
                                <ion-card-title style="margin-bottom: 12px; text-align: left;">
                                    4
                                </ion-card-title>
                            </ion-card-content>
                        </ion-card>
                        <ion-card style="background-color: #f0f0f0" @click="clickKeypad('5')">
                            <ion-card-content>
                                <ion-card-title style="margin-bottom: 12px; text-align: left;">
                                    5
                                </ion-card-title>
                            </ion-card-content>
                        </ion-card>
                        <ion-card style="background-color: #f0f0f0" @click="clickKeypad('6')">
                            <ion-card-content>
                                <ion-card-title style="margin-bottom: 12px; text-align: left;">
                                    6
                                </ion-card-title>
                            </ion-card-content>
                        </ion-card>
                        <ion-card style="background-color: #f0f0f0" @click="clickKeypad('7')">
                            <ion-card-content>
                                <ion-card-title style="margin-bottom: 12px; text-align: left;">
                                    7
                                </ion-card-title>
                            </ion-card-content>
                        </ion-card>
                        <ion-card style="background-color: #f0f0f0" @click="clickKeypad('8')">
                            <ion-card-content>
                                <ion-card-title style="margin-bottom: 12px; text-align: left;">
                                    8
                                </ion-card-title>
                            </ion-card-content>
                        </ion-card>
                        <ion-card style="background-color: #f0f0f0"  @click="clickKeypad('9')">
                            <ion-card-content>
                                <ion-card-title style="margin-bottom: 12px; text-align: left;">
                                    9
                                </ion-card-title>
                            </ion-card-content>
                        </ion-card>
                        
                        <ion-card style="background-color: #f0f0f0"  @click="clickKeypad('0')">
                            <ion-card-content>
                                <ion-card-title style="margin-bottom: 12px; text-align: left;">
                                    0
                                </ion-card-title>
                            </ion-card-content>
                        </ion-card>
                        <ion-card style="background-color: #f0f0f0" @click="clickKeypad('c')">
                            <ion-card-content>
                                <ion-card-title style="margin-bottom: 12px; text-align: left;">
                                    C
                                </ion-card-title>
                            </ion-card-content>
                        </ion-card>
                        <ion-card style="background-color: #f0f0f0" @click="gotoDashboard()">
                            <ion-card-content>
                                <ion-card-title style="margin-bottom: 12px; text-align: left;">
                                    LOGIN
                                </ion-card-title>
                            </ion-card-content>
                        </ion-card>

                        
                    </div>
                </ion-content>

            </ion-col>
        </ion-row>
        <ion-row style="text-align: right; ">
            <ion-col>
                <ion-note>abc
                </ion-note>
            </ion-col>
        </ion-row>
      </ion-grid>
    </ion-content>
  </template>
  
  <script lang="ts">
    import { IonContent, IonNavLink, IonButton, IonInput, IonRow, IonCol, IonImg, IonCard, IonCardTitle, IonCardContent, IonNote, IonGrid } from '@ionic/vue';
    import App from '@/views/dashboard-page.vue';
    // import localStorage from '@/plugin/local-storage.vue';

    var passcode = "s";
    export default {
      components: { IonContent, IonNavLink, IonButton, IonInput, IonRow, IonCol, IonImg, IonCard, IonCardTitle, IonCardContent, IonNote, IonGrid},
      name: "LoginPage",
        

      data() {
        return {
          passcode,
          component: App
        };
      },
      methods: {
        gotoDashboard() {
            console.log("s");
        },
        clickKeypad(num: string) {
            // alert(num);
            // alert(this.passcode);
            if (num != 'c') {
                passcode += num;
            } else {
                passcode = "";
            }
            alert(passcode);
        }
      }
    };
  </script>

  <style scoped>
    .card-wrapper {
        flex-wrap: wrap;
        display:flex;
        align-items: center;
        justify-content: center;
        height: 100%;
    }
    
    ion-card-header {
        display: flex;
        flex-flow: column-reverse;
    }
    ion-card {
        flex: 1 1 26%;
    }
  </style>