VueJS updates

app/assets/javascripts/line_comments/application.js.coffee

@@ -2,9 +2,13 @@
 #= require_directory ./stores
 #= require_directory ./components
 
-$ ->
-  new Vue
+$ =>
+  @DiffNotesApp = new Vue
     el: '#notes'
+    components:
+      'resolve-btn': ResolveBtn
 
   new Vue
     el: '#resolve-all-app'
+    components:
+      'resolve-all': ResolveAll

app/assets/javascripts/line_comments/components/resolve_all.js.coffee

-ResolveAll = Vue.extend
+@ResolveAll = Vue.extend
   data: ->
     { comments: CommentsStore.state }
   computed:
@@ -15,5 +15,3 @@ ResolveAll = Vue.extend
     updateAll: ->
       resolveAll = !(this.resolved is this.commentsCount)
       CommentsStore.updateAll(resolveAll)
-
-Vue.component 'resolve-all', ResolveAll

app/assets/javascripts/line_comments/components/resolve_btn.js.coffee

-ResolveBtn = Vue.extend
+@ResolveBtn = Vue.extend
   props:
     noteId: Number
     resolved: Boolean
@@ -18,7 +18,8 @@ ResolveBtn = Vue.extend
       this.$nextTick this.updateTooltip
   compiled: ->
     $(this.$el).tooltip()
+  destroyed: ->
+    console.log this.noteId
   created: ->
+    console.log this.noteId
     CommentsStore.create(this.noteId, this.resolved)
-
-Vue.component 'resolve-btn', ResolveBtn

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

@@ -47,7 +47,7 @@
     #resolve-all-app{ "v-cloak" => true }
       %resolve-all{ "inline-template" => true }
         .line-resolve-all{ "v-show" => "commentsCount > 0" }
-          %button.btn.btn-gray{ type: "button", "aria-label" => "Resolve all", "v-on:click" => "updateAll" }
+          %button.btn.btn-gray{ type: "button", "aria-label" => "Resolve all", "@click" => "updateAll" }
             {{ buttonText }}
           %span.line-resolve-text
             {{ resolved }}/{{ commentsCount }} comments resolved

app/views/projects/notes/_note.html.haml

@@ -22,7 +22,7 @@
             %span.note-role.hidden-xs= access
           - unless note.system
             %resolve-btn{ ":note-id" => note.id, ":resolved" => "false", "inline-template" => true }
-              %button.note-action-button.line-resolve-btn{ type: "button", "v-bind:class" => "{ 'is-active': isResolved }", "v-bind:aria-label" => "buttonText", "v-on:click" => "resolve", "v-bind:title" => "buttonText" }
+              %button.note-action-button.line-resolve-btn{ type: "button", ":class" => "{ 'is-active': isResolved }", ":aria-label" => "buttonText", "@click" => "resolve", ":title" => "buttonText" }
                 = icon("check")
           - if current_user and not note.system
             = link_to '#', title: 'Award Emoji', class: 'note-action-button note-emoji-button js-add-award js-note-emoji', data: { position: 'right' } do