Why is the event not working?

Question

Vue.js

<div class="profile-account__add-funds">
        <span class="profile-account__add-funds__free">Пополнить Бесплатно</span>
        <button class="profile-account__add-funds__add blue-btn" v-on:click='isOpen = !isOpen'>Пополнить</button>
</div>
<div class="container add-funds" v-show="isOpen">
    <div class="profile_account__billing">
    <div class="profile_account__billing__title">Введите суму на которую вы хотите пополнить личный счет
    </div>
   <input class="profile_account__billing__input"/>
   <button href="" class="profile_account__billing__add blue-btn" >Оплатить</button>
</div>

export default {
        name: "profile-account",
        data: {
          isOpen: false
        },
        props: [
            'url',
            'amount'

        ],
        mounted() {

        },
        data() {
            return {
                balance: this.amount
            }
        },
        methods: {
          showAddfunds: function(){
            this.isOpen = !this.isOpen
            console.log(this.isOpen)
          }
        }
    }

Answer 1

I don't like the two definitions of data (object and method). Describe like this

export default {
        name: "profile-account",
       
        props: [
            'url',
            'amount'

        ],
        mounted() {

        },
        data() {
            return {
                balance: this.amount,
                isOpen: false
            }
        },
        methods: {
          showAddfunds: function(){
            this.isOpen = !this.isOpen
            console.log(this.isOpen)
          }
        }
    }