diff --git a/src/App.vue b/src/App.vue
index 033231c..8024cae 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,10 +4,6 @@
   </layout>
 </template>
 
-<script lang="ts">
-import { defineComponent } from "vue";
-
+<script setup lang="ts">
 import Layout from "@/components/Layout/index.vue";
-
-export default defineComponent({ components: { Layout } });
 </script>
diff --git a/src/components/Alert/index.vue b/src/components/Alert/AlertIndex.vue
similarity index 100%
rename from src/components/Alert/index.vue
rename to src/components/Alert/AlertIndex.vue
diff --git a/src/components/Footer/index.vue b/src/components/Footer/index.vue
index 7e095df..4052373 100644
--- a/src/components/Footer/index.vue
+++ b/src/components/Footer/index.vue
@@ -17,12 +17,6 @@
   </footer>
 </template>
 
-<script lang="ts">
-import {defineComponent} from "vue";
-
-export default defineComponent({});
-</script>
-
 <style lang="less" scoped>
 @import "./styles.less";
 </style>
diff --git a/src/components/Layout/index.vue b/src/components/Layout/index.vue
index 305e389..d7bf66a 100644
--- a/src/components/Layout/index.vue
+++ b/src/components/Layout/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="LayoutDefault">
     <slot></slot>
-    <Alert
+    <AlertIndex
       v-if="alert"
       :title="alert.title"
       :message="alert.message"
@@ -9,42 +9,34 @@
       :link="alert.link"
       :linkText="alert.linkText"
       @close="setAlert(null)"
-    ></Alert>
+    ></AlertIndex>
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { primaryInput } from "detect-it";
-import { defineComponent } from "vue";
-import { mapGetters, mapMutations } from "vuex";
+import { computed, watch, onMounted} from "vue";
+import { useStore } from "vuex";
+import AlertIndex from "@/components/Alert/AlertIndex.vue";
 
-import Alert from "@/components/Alert/index.vue";
-
-export default defineComponent({
-  name: "LayoutDefault",
-
-  components: { Alert },
-  methods: { ...mapMutations(["setAlert"]) },
+onMounted(()=>{
+  document.documentElement.classList.add(
+      primaryInput === "touch" ? "isTouch" : "isPointer"
+  );
+})
 
-  computed: {
-    ...mapGetters(["alert"]),
-  },
+const store = useStore()
+const alert = computed(()=>store.getters.alert)
 
-  mounted() {
-    // for active/hovers on touch/mouse devices
-    document.documentElement.classList.add(
-      primaryInput === "touch" ? "isTouch" : "isPointer"
-    );
-  },
+const setAlert = (alert: string | null)=>{
+  store.commit('setAlert',alert )
+}
 
-  watch: {
-    alert: function (newVal) {
-      if (newVal !== null) {
-        this.alert = { ...newVal };
-      }
-    },
-  },
-});
+watch(alert, (newVal)=>{
+  if (newVal !== null) {
+    setAlert({ ...newVal })
+  }
+})
 </script>
 
 <style lang="less" scoped>