Refactor deprecated named slots in Vue

ee/app/assets/javascripts/vue_shared/security_reports/grouped_security_reports_app.vue

@@ -279,7 +279,8 @@ export default {
     class="mr-widget-border-top grouped-security-reports mr-report"
     data-qa-selector="vulnerability_report_grouped"
   >
-    <div v-if="pipelinePath" slot="actionButtons">
+    <template v-if="pipelinePath" #actionButtons>
+      <div>
         <a
           :href="securityTab"
           target="_blank"
@@ -289,16 +290,16 @@ export default {
           <icon :size="16" name="external-link" />
         </a>
       </div>
+    </template>
 
-    <div
-      v-if="isMRActive && isBaseSecurityReportOutOfDate"
-      slot="subHeading"
-      class="text-secondary-700 text-1"
-    >
+    <template v-if="isMRActive && isBaseSecurityReportOutOfDate" #subHeading>
+      <div class="text-secondary-700 text-1">
         <span>{{ subHeadingText }}</span>
       </div>
+    </template>
 
-    <div slot="body" class="mr-widget-grouped-section report-block">
+    <template #body>
+      <div class="mr-widget-grouped-section report-block">
         <template v-if="hasSastReports">
           <summary-row
             :summary="groupedSastText"
@@ -392,5 +393,6 @@ export default {
           @hideDismissalDeleteButtons="hideDismissalDeleteButtons"
         />
       </div>
+    </template>
   </report-section>
 </template>