Internal server error in vue.js?

I have this method:

  addCheckbox: function() {
              if(this.field.value) {
                  this.fields.push(this.field);
                  this.field = { value: '' };
              }

              this.$http.get('/profile/checkoutAdditionalFeatures').then(function(response){
                  // True
                  data = response.data;
                  console.log(data);
                  this.$set('checkoutAdditionalFeatures', data);

              }, function(response){
                console.log(response);
                  // False
              }.bind(this));

          }

In routes i have this:

  Route::get('/profile/checkoutAdditionalFeatures', 'StandardUser\PropertiesController@checkoutAdditionalFeatures');

And in controller i have this:

public function checkoutAdditionalFeatures($additional_features){
  if(!empty($additional_features)){
    foreach($additional_features as $additional_feature){
      $data = [
         'name' => $additional_feature,
       ];
       if (!Feature::where('name', '=', $additional_feature)->exists()) {
           $additional = Feature::firstOrCreate($data);
           $additional_ids[] = $additional->id;
           return true;
       }
       return false;
    }

HTML:

  <button type="button" class="btn btn-info btn-flat bg_blue"  @click="addCheckbox"><i class="fa fa-plus"></i> Add feature</button>
  }
}

What i want is when user enter some word and click on button to check in controller if is it true or false and then return in vue.js. Then i want to display in view that word if its false.

via Chebli Mohamed