diff --git a/src/components/AppHeaderDropdownAccnt.vue b/src/components/AppHeaderDropdownAccnt.vue
index 8be6ac06..6f5bd209 100644
--- a/src/components/AppHeaderDropdownAccnt.vue
+++ b/src/components/AppHeaderDropdownAccnt.vue
@@ -49,7 +49,7 @@
 import avatar from './../assets/images/avatars/8.jpg'
 export default {
   name: 'AppHeaderDropdownAccnt',
-  data() {
+  setup() {
     return {
       avatar: avatar,
       itemsCount: 42,
diff --git a/src/components/AppSidebar.vue b/src/components/AppSidebar.vue
index c45d31af..59d77d74 100644
--- a/src/components/AppSidebar.vue
+++ b/src/components/AppSidebar.vue
@@ -37,19 +37,20 @@
 </template>
 
 <script>
+import { computed } from 'vue'
+import { useStore } from 'vuex'
 import { AppSidebarNav } from './AppSidebarNav'
 export default {
   name: 'AppSidebar',
   components: {
     AppSidebarNav,
   },
-  computed: {
-    sidebarUnfoldable() {
-      return this.$store.state.sidebarUnfoldable
-    },
-    sidebarVisible() {
-      return this.$store.state.sidebarVisible
-    },
+  setup() {
+    const store = useStore()
+    return {
+      sidebarUnfoldable: computed(() => store.state.sidebarUnfoldable),
+      sidebarVisible: computed(() => store.state.sidebarVisible),
+    }
   },
 }
 </script>