tengo el siguiente código

 <script lang="ts"> import { RouterView } from "vue-router"; import defaultLayout from "@/layouts/default.vue"; import dashboardLayout from "@/layouts/dashboard.vue"; import { useDefaultStore } from "@/stores/default"; import "./index.css"; import { defineComponent } from "vue"; export default defineComponent({ setup() { let { getLayout } = useDefaultStore(); return { getLayout }; }, components: { defaultLayout, dashboardLayout }, }); </script> <template> {{ getLayout }} <component :is="getLayout"> <RouterView /> </component> </template>

Cuando llegué a /dashboard mi estado se actualiza pero el getter no lo hace por alguna razón, ¿por qué?

 <script setup lang="ts"> import { useDefaultStore } from "@/stores/default"; let { getUserData, SET_LAYOUT, getLayout } = useDefaultStore(); SET_LAYOUT("dashboardLayout"); </script>

Aquí mi tienda:

 actions: { SET_LAYOUT(layout: any) { console.log("setting layout"); console.log(layout); this.layout = layout; }, }

Literalmente puedo ver los cambios dentro de la consola, pero no se aplican en la interfaz de usuario.