String concatenation in value bind in Vue

I have just started learning Vue, so it might be silly question. I have created a Vue component and want to do string concatenation in value bind.

Like this.

Vue.component('button-counter',{
    data:function(){
        return { count : 0}
    },
    template:"<input type='button' v-on:click='count++' v-bind:value='"Total Counter :"+count'/>"
})

But it's seems to be wrong syntax. Can anyone please help me on how I can achieve this.

In example there is another way of doing this, e.g:

template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

But is it possible to achieve using value binding?

Solution

I would do this with a computed property. I would also probably swap this up from an input type to a button, but here is how to solve with current input.

new Vue(({
  el: "#app",
  data:function(){
    return { count : 0}
  },
  computed: {
    buttonText() {
      return "Total Counter : " + this.count; 
    }
  }, 
  template:"<input type='button' v-on:click='count++' v-bind:value='buttonText'/>"
}))

<script src="https://unpkg.com/vue@2"></script>
<html>
<div id="app"/>