fix: apply ESLint rule vue/component-tags-order

app/javascript/v3/components/SnackBar/Container.vue

@@ -1,18 +1,3 @@
-<template>
-  <transition-group
-    name="toast-fade"
-    tag="div"
-    class="fixed left-0 right-0 mx-auto overflow-hidden text-center top-10 z-50 max-w-[40rem]"
-  >
-    <snackbar-item
-      v-for="snackbarAlertMessage in snackbarAlertMessages"
-      :key="snackbarAlertMessage.key"
-      :message="snackbarAlertMessage.message"
-      :action="snackbarAlertMessage.action"
-    />
-  </transition-group>
-</template>
-
 <script>
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import SnackbarItem from './Item.vue';
@@ -52,3 +37,18 @@ export default {
   },
 };
 </script>
+
+<template>
+  <transition-group
+    name="toast-fade"
+    tag="div"
+    class="fixed left-0 right-0 mx-auto overflow-hidden text-center top-10 z-50 max-w-[40rem]"
+  >
+    <snackbar-item
+      v-for="snackbarAlertMessage in snackbarAlertMessages"
+      :key="snackbarAlertMessage.key"
+      :message="snackbarAlertMessage.message"
+      :action="snackbarAlertMessage.action"
+    />
+  </transition-group>
+</template>

app/javascript/v3/components/SnackBar/Item.vue

@@ -1,19 +1,3 @@
-<template>
-  <div
-    class="bg-slate-900 dark:bg-slate-800 rounded-md drop-shadow-md mb-4 max-w-[40rem] inline-flex items-center min-w-[22rem] py-3 px-4"
-    :class="isActionPresent ? 'justify-between' : 'justify-center'"
-  >
-    <div class="text-sm font-medium text-white">
-      {{ message }}
-    </div>
-    <div v-if="isActionPresent" class="ml-4">
-      <router-link v-if="action.type == 'link'" :to="action.to" class="">
-        {{ action.message }}
-      </router-link>
-    </div>
-  </div>
-</template>
-
 <script>
 export default {
   props: {
@@ -35,3 +19,19 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="bg-slate-900 dark:bg-slate-800 rounded-md drop-shadow-md mb-4 max-w-[40rem] inline-flex items-center min-w-[22rem] py-3 px-4"
+    :class="isActionPresent ? 'justify-between' : 'justify-center'"
+  >
+    <div class="text-sm font-medium text-white">
+      {{ message }}
+    </div>
+    <div v-if="isActionPresent" class="ml-4">
+      <router-link v-if="action.type == 'link'" :to="action.to" class="">
+        {{ action.message }}
+      </router-link>
+    </div>
+  </div>
+</template>