Implement compat mixin to support Vue.js 3 migration

* drop unneeded <template functional>

app/assets/javascripts/diffs/components/diff_row.vue

@@ -6,6 +6,7 @@ https://gitlab.com/gitlab-org/gitlab/-/merge_requests/57842
 * */
 import { memoize } from 'lodash';
 import { isLoggedIn } from '~/lib/utils/common_utils';
+import { compatFunctionalMixin } from '~/lib/utils/vue3compat/compat_functional_mixin';
 import {
   PARALLEL_DIFF_VIEW_TYPE,
   CONFLICT_MARKER_THEIR,
@@ -24,6 +25,10 @@ import * as utils from './diff_row_utils';
 export default {
   DiffGutterAvatars,
   CodeQualityGutterIcon: () => import('ee_component/diffs/components/code_quality_gutter_icon.vue'),
+
+  // Temporary mixin for migration from Vue.js 2 to @vue/compat
+  mixins: [compatFunctionalMixin],
+
   props: {
     fileHash: {
       type: String,

app/assets/javascripts/emoji/components/emoji_group.vue

 <script>
+import { compatFunctionalMixin } from '~/lib/utils/vue3compat/compat_functional_mixin';
+
 export default {
+  // Temporary mixin for migration from Vue.js 2 to @vue/compat
+  mixins: [compatFunctionalMixin],
+
   props: {
     emojis: {
       type: Array,

app/assets/javascripts/lib/utils/vue3compat/compat_functional_mixin.js

+import Vue from 'vue';
+
+export const compatFunctionalMixin = Vue.version.startsWith('3')
+  ? {
+      created() {
+        this.props = this.$props;
+        this.listeners = this.$listeners;
+      },
+    }
+  : {
+      created() {
+        throw new Error('This mixin should not be executed in Vue.js 2');
+      },
+    };

app/assets/javascripts/vue_shared/components/form/form_footer_actions.vue

-<!-- eslint-disable-next-line vue/no-deprecated-functional-template -->
-<template functional>
+<template>
   <footer class="form-actions d-flex justify-content-between">
     <div><slot name="prepend"></slot></div>
     <div><slot></slot></div>

ee/app/assets/javascripts/vue_shared/security_reports/components/vulnerability_detail.vue

@@ -10,10 +10,9 @@ export default {
 };
 </script>
 
-<!-- eslint-disable-next-line vue/no-deprecated-functional-template -->
-<template functional>
+<template>
   <div class="d-sm-flex my-sm-2 my-4">
-    <label class="col-sm-2 text-sm-right gl-font-weight-bold gl-pl-0">{{ props.label }}:</label>
+    <label class="col-sm-2 text-sm-right gl-font-weight-bold gl-pl-0">{{ label }}:</label>
     <div class="col-sm-10 gl-pl-0 gl-text-gray-500">
       <slot></slot>
     </div>

patches/@vue+compiler-sfc+3.2.47.patch

+diff --git a/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js b/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js
+index 6093500..5e9bcbb 100644
+--- a/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js
++++ b/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js
+@@ -5226,7 +5226,8 @@ function parse$4(source, { sourceMap = true, filename = DEFAULT_FILENAME, source
+                     const templateBlock = (descriptor.template = createBlock(node, source, false));
+                     templateBlock.ast = node;
+                     // warn against 2.x <template functional>
+-                    if (templateBlock.attrs.functional) {
++                    // disabled by patch-package in gitlab as temporary migration
++                    if (false && templateBlock.attrs.functional) {
+                         const err = new SyntaxError(`<template functional> is no longer supported in Vue 3, since ` +
+                             `functional components no longer have significant performance ` +
+                             `difference from stateful ones. Just use a normal <template> ` +
+diff --git a/node_modules/@vue/compiler-sfc/dist/compiler-sfc.esm-browser.js b/node_modules/@vue/compiler-sfc/dist/compiler-sfc.esm-browser.js
+index 2ce8d7a..2fbe75b 100644
+--- a/node_modules/@vue/compiler-sfc/dist/compiler-sfc.esm-browser.js
++++ b/node_modules/@vue/compiler-sfc/dist/compiler-sfc.esm-browser.js
+@@ -37376,7 +37376,8 @@ function parse$5(source, { sourceMap = true, filename = DEFAULT_FILENAME, source
+                     const templateBlock = (descriptor.template = createBlock(node, source, false));
+                     templateBlock.ast = node;
+                     // warn against 2.x <template functional>
+-                    if (templateBlock.attrs.functional) {
++                    // disabled by patch-package in gitlab as temporary migration
++                    if (false && templateBlock.attrs.functional) {
+                         const err = new SyntaxError(`<template functional> is no longer supported in Vue 3, since ` +
+                             `functional components no longer have significant performance ` +
+                             `difference from stateful ones. Just use a normal <template> ` +