Fix Merge Conflicts app to make it work with Vue 2

app/assets/javascripts/merge_conflicts/components/parallel_conflict_lines.js.es6

@@ -7,7 +7,22 @@
     props: {
       file: Object
     },
-    mixins: [global.mergeConflicts.utils, global.mergeConflicts.actions]
+    mixins: [global.mergeConflicts.utils, global.mergeConflicts.actions],
+    template: `
+      <table>
+        <tr class="line_holder parallel" v-for="section in file.parallelLines">
+          <template v-for="line in section">
+            <td class="diff-line-num header" :class="lineCssClass(line)" v-if="line.isHeader"></td>
+            <td class="line_content header" :class="lineCssClass(line)" v-if="line.isHeader">
+              <strong>{{line.richText}}</strong>
+              <button class="btn" @click="handleSelected(file, line.id, line.section)">{{line.buttonTitle}}</button>
+            </td>
+            <td class="diff-line-num old_line" :class="lineCssClass(line)" v-if="!line.isHeader">{{line.lineNumber}}</td>
+            <td class="line_content parallel" :class="lineCssClass(line)" v-if="!line.isHeader" v-html="line.richText"></td>
+          </template> 
+        </tr>
+      </table>
+    `,
   });
 
 })(window.gl || (window.gl = {}));

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

@@ -30,11 +30,8 @@
           .diff-wrap-lines.code.file-content.js-syntax-highlight{"v-show" => "!isParallel && file.resolveMode === 'interactive' && file.type === 'text'" }
             = render partial: "projects/merge_requests/conflicts/components/inline_conflict_lines"
           .diff-wrap-lines.code.file-content.js-syntax-highlight{"v-show" => "isParallel && file.resolveMode === 'interactive' && file.type === 'text'" }
-            = render partial: "projects/merge_requests/conflicts/components/parallel_conflict_lines"
+            %parallel-conflict-lines{ ":file" => "file" }
           %div{"v-show" => "file.resolveMode === 'edit' ||  file.type === 'text-editor'"}
             = render partial: "projects/merge_requests/conflicts/components/diff_file_editor"
 
     = render partial: "projects/merge_requests/conflicts/submit_form"
-
--# Components
-= render partial: 'projects/merge_requests/conflicts/components/parallel_conflict_line'

app/views/projects/merge_requests/conflicts/components/_parallel_conflict_line.html.haml

-%script{"id" => 'parallel-conflict-line', "type" => "text/x-template"}
-  %td.diff-line-num.header{":class" => "lineCssClass(line)", "v-if" => "line.isHeader"}
-  %td.line_content.header{":class" => "lineCssClass(line)", "v-if" => "line.isHeader"}
-    %strong {{line.richText}}
-    %button.btn{"@click" => "handleSelected(file, line.id, line.section)"}
-      {{line.buttonTitle}}
-  %td.diff-line-num.old_line{":class" => "lineCssClass(line)", "v-if" => "!line.isHeader"}
-    {{line.lineNumber}}
-  %td.line_content.parallel{":class" => "lineCssClass(line)", "v-if" => "!line.isHeader", "v-html" => "line.richText"}

app/views/projects/merge_requests/conflicts/components/_parallel_conflict_lines.html.haml

-%parallel-conflict-lines{"inline-template" => "true", ":file" => "file"}
-  %table
-    %tr.line_holder.parallel{"v-for" => "section in file.parallelLines"}
-      %template{"is"=>"parallel-conflict-line", "v-for" => "line in section", ":line" => "line", ":file" => "file"}
-        %td.diff-line-num.header{":class" => "lineCssClass(line)", "v-if" => "line.isHeader"}
-        %td.line_content.header{":class" => "lineCssClass(line)", "v-if" => "line.isHeader"}
-          %strong {{line.richText}}
-          %button.btn{"@click" => "handleSelected(file, line.id, line.section)"}
-            {{line.buttonTitle}}
-        %td.diff-line-num.old_line{":class" => "lineCssClass(line)", "v-if" => "!line.isHeader"}
-          {{line.lineNumber}}
-        %td.line_content.parallel{":class" => "lineCssClass(line)", "v-if" => "!line.isHeader", "v-html" => "line.richText"}
-