VUE JS : Onclick did not increment the score as expected

Hey there i’m working on a simple game where if user click the button then the score will be plus i.e. 1.

new Vue({
  el: '#MyApp',
  data: {
    score: '10',
  methods: {
    ScoreIncre: function(incre) {
      this.score += incre;
<script src=""></script>
<div id="MyApp">
  <p>My Score is {{score}</p>
  <button v-on:click="ScoreIncre(1)">Increase my Score</button>

Once button is clicked so instead of adding score by +1 it is displaying the output as ‘My Score is 101’. What would be the possible cause of it? I have tried to parse the ‘incre’ to int but the result was same.


Because score is ’10’ so it is a string not a number this is why when you increment ’10’+1 it’s ‘101’ not 11 , you should change ’10’ by 10