:disabled Form button not working in Vue 3

I am trying to use the state to make the form button toggle disabled and enabled. If the I tick the check box, the :disable will becomes true and the button can be use. But it seem like in Vue 3 is not working?

Here's the code:

<template lang="pug">
.container
  .row
    .col-lg-12.desktop-sign-up
      .row.no-gutters
        .col-lg-6
          .image-container
            img.logo-container(src=".././assets/images/logo.png")
        .col-lg-6
          form.sign-in-form
            img.sign-in-image(src=".././assets/images/logo.png")
            .sign-in-header
              h1 Hello
            .sign-in-content
              h4 Please create <br/>an account to continue.
              .form-group
                input.form-control(placeholder="Username" type="text" v-model="user.username")
              .form-group
                input.form-control(placeholder="Email Address" type="email" v-model.lazy="user.email")
              .form-group(style="margin-bottom: 0;")
                input.form-control(placeholder="Password" type="password" v-model="user.password")
              .form-check
                input.form-check-input(id="customeCheck1" type="checkbox" v-model="user.isTncChecked")
                label.form-check-label(for="customCheck1") I agree with our 
                  router-link(:to="'/'" target="_blank") Terms 
                  | and 
                  router-link(:to="'/'" target="_blank") Conditions
                  | .
              .error-msg
                p(v-for="item in errorMsg" :class="{ success : isSuccess }" ) {{ item.msg }}
              .cta-conainer
                a.cta.cta-submit(href="" @click.prevent="handleSubmit" :disabled="isDisabled") Sign up
              .sign-in-msg
                p Already have an account.
                  a(href="#") Sign in here
</template>
<script>
import axios from 'axios'
export default {
  name: 'Register',
  components: {
  },
  directives: {
  },
  data() {
    return {
      user: {
        username: '',
        email: '',
        first_name:'',
        last_name:'',
        password: '',
        tracks: [],
        dateCreated: '',
        profile_pic: '',
        isTncChecked: false
      }
    }
  },
  beforeCreate() {
  },
  mounted () {
  },
  computed: {
    isDisabled () {
      return !this.user.isTncChecked
    }
  },
  methods: {}
}
</script>

It works on Vue 2. Couldn't find any info about how the vue 3 breaking change affect this. Hope anyone can help me understand this.

Thank you