Getting the value of a button using Vue.js

I have a form that has three buttons and each need a value of 1, 2 and 3 respectively. They're placed in a form and the user is to click one of the three resulting in the form changing. I'm attempting to make an ajax call based upon the value of the button the user has pressed. I'm attempting this like so:

<form method="POST">
<input type="hidden" name="_token" id="token" value="{{ csrf_token() }}">

 <div class="col-md-4 col-sm-6 feature text-center">
    <div class="content">
         <button class="btn btn-default btn-question" 
         v-model="selectedcategory"
          v-on="click: search" 
         value="1">Category 1
         </button>
     </div>
</div>

 <div class="col-md-4 col-sm-6 feature text-center">
    <div class="feature-content">
      <button class="btn btn-default btn-question" 
      v-model="selectedcategory" 
      v-on="click: search" 
       value="2">Category 2
      </button>
     </div>
</div>

<div class="col-md-4 col-sm-6 feature text-center">
     <div class="feature-content">
      <button class="btn btn-default btn-question" 
       v-model="selectedcategory" 
      v-on="click: search" 
      value="3">Category 3
         </button>
     </div>
</div>
</form>



Vue.http.headers.common['X-CSRF-TOKEN'] = document.querySelector('#token').getAttribute('value');

new Vue({
 el: '#picker',

    data: {
        selectedcategory: '0'
  },

  methods:{

      search: function(e){
         e.preventDefault();

         var getresults = this.$http.get('api/products/' + this.selectedcategory, function(products){
              this.$set('products', products); //key, data
         });
     }
    }
});

Like this, I'm unable to get the value of the buttons but if I do a simple select drop down menu like so

<select v-model="selectedcategory" v-on="click: 
 <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>