button v-on:click not functioning in Vue Native - vue-native

Question

I'm trying to get button v-on:click to work in Vue Native but it is not updating the variable as expected. Here is the code in the App.vue file of a basic project:
<template>
<view class="container">
<button v-on:click="count += 1" title="Add 1" />
<text>{{ counter }}</text>
</view>
</template>
<script>
export default {
data: function() {
return {
counter: 0
};
}
};
</script>
<style>
.container {
flex: 1;
align-items: center;
justify-content: center;
}
The value of counter is always showing as 0, even after clicking the "Add 1" button several times. Why isn't button v-on:click working in Vue Native?
EDIT #1:
As #Suoakira pointed out the button code was incorrect so it has been updated follows:
<button v-on:click="counter++" title="Add 1" />
However, the value of counter is still always showing 0, even after clicking the "Add 1" button. Why isn't this working in Vue Native?
EDIT #2:
I have still not found a way to get v-on:click to work in Vue Native in the button tag. However, the following alternative works. It is further developed than the original post. It demonstrates two different ways to work with :on-press in touchable-opacity. If someone knows how to write the equivalent using v-on:click and the button tag in Vue Native, I'd sure like to see that solution. In the meantime -
<template>
<view class="container">
<touchable-opacity class="button" :on-press="() => counter++">
<text class="button-text">Add 1</text>
</touchable-opacity>
<touchable-opacity class="button" :on-press="addTwo">
<text class="button-text">Add 2</text>
</touchable-opacity>
<touchable-opacity class="button" :on-press="resetCounter">
<text class="button-text">Reset</text>
</touchable-opacity>
<text>{{ counter }}</text>
</view>
</template>
<script>
export default {
data: function() {
return {
counter: 0
}
},
methods: {
addTwo: function() {
this.counter += 2;
},
resetCounter: function() {
this.counter = 0;
}
}
};
</script>
<style>
.container {
align-items: center;
padding-bottom: 30px;
}
.button {
width: 100px;
height: 35px;
background-color: #FFCE00;
justify-content: center;
align-items: center;
margin-bottom: 5px;
}
.button-text {
font-size: 18px;
font-weight: 700;
}
</style>

Answer 1

Your data property is counter, but you are updating count on click.

Answer 2

please try with :on-press="test" instead of v-on:click