hooked up header with vuejs. using jquery for ajax calls for now.

app/assets/javascripts/merge_request.js

@@ -13,7 +13,10 @@ var MR = function(){
           return new Flash(mergeFailMessage, 'alert');
         },
         success: function(data, textStatus, jqXHR) {
-          console.log("data",data);
+          var s = '';
+          for(s in data) {
+            store.state[s] = data[s]; 
+          }
         }
       });
     }

app/controllers/projects/merge_requests_controller.rb

@@ -141,9 +141,10 @@ class Projects::MergeRequestsController < Projects::ApplicationController
                        @merge_request.target_project, @merge_request])
         end
         format.json do
-          render json: {
-            saved: @merge_request.valid?,
-            assignee_avatar_url: @merge_request.assignee.try(:avatar_url)
+          render json:     {
+            label: @merge_request.state_human_name,
+            open: @merge_request.open?,
+            closed: @merge_request.closed?
           }
         end
       end

app/views/projects/merge_requests/_show.html.haml

@@ -100,7 +100,7 @@
       label: "#{@merge_request.state_human_name}",
       closed: #{@merge_request.closed?},
       open: #{@merge_request.open?},
-      closeURL: "#{merge_request_path(@merge_request, merge_request: { state_event: :close })}",
-      reopenURL: "#{merge_request_path(@merge_request, merge_request: {state_event: :reopen })}"
+      closeURL: "#{merge_request_path(@merge_request, merge_request: { state_event: :close }, format: :json)}",
+      reopenURL: "#{merge_request_path(@merge_request, merge_request: {state_event: :reopen }, format: :json)}"
     });
   });

app/views/projects/merge_requests/show/_mr_title.html.haml

 .detail-page-header#merge-request-header{'v-cloak'=> true, transition: "fade"}
-  .status-box{ class: status_box_class(@merge_request)}
+  .status-box{"v-bind:class" => "{'status-box-open':state.open,'status-box-closed':state.closed}",transition: 'fade'}
     {{ state.label }}
   %span.identifier
     Merge Request ##{@merge_request.iid}
@@ -16,9 +16,9 @@
   .issue-btn-group.pull-right
     - if can?(current_user, :update_merge_request, @merge_request)
-      = link_to 'Close', merge_request_path(@merge_request, merge_request: { state_event: :close }), data: {no_turbolink: true}, class: 'btn btn-nr btn-grouped btn-close', data: {no_turbolink: true}, title: 'Close merge request', "v-show"=>"state.open", "v-on:click.prevent" => "closeClicked"
+      = link_to 'Close', merge_request_path(@merge_request, merge_request: { state_event: :close }, format: :json), data: {no_turbolink: true}, class: 'btn btn-nr btn-grouped btn-close', data: {no_turbolink: true}, title: 'Close merge request', "v-show"=>"state.open", "v-on:click.prevent" => "closeClicked"
       
-      = link_to 'Reopen', merge_request_path(@merge_request, merge_request: {state_event: :reopen }), data: {no_turbolink: true}, class: 'btn btn-nr btn-grouped btn-reopen reopen-mr-link', title: 'Reopen merge request', "v-show"=>"state.closed", "v-on:click.prevent" => "reopenClicked"
+      = link_to 'Reopen', merge_request_path(@merge_request, merge_request: {state_event: :reopen }, format: :json), data: {no_turbolink: true}, class: 'btn btn-nr btn-grouped btn-reopen reopen-mr-link', title: 'Reopen merge request', "v-show"=>"state.closed", "v-on:click.prevent" => "reopenClicked"
       = link_to edit_namespace_project_merge_request_path(@project.namespace, @project, @merge_request), class: 'btn btn-nr btn-grouped issuable-edit', id: 'edit_merge_request', "v-show"=>"state.open" do
         %i.fa.fa-pencil-square-o