My data variable not reflect to components props in vue

Question

I have this code

<template>
    <AppLayout :user="user">
      <router-view :user="user" />
    </AppLayout>
</template>

<script setup>
import LoginService from '@/services/LoginService';
import { inject, onMounted } from 'vue';

let user = null;
const $cookies = inject('$cookies');

async function getFuncionario() {
  const publicToken = $cookies.get('PublicToken');

  console.log(publicToken);

  if (publicToken) {
    await LoginService.getFuncionarioForMenu(publicToken)
      .then((res) => {
        user = res.data;
      })
      .catch((error) => {
        console.log(error);
        // redirect pagina de erro
      });

    console.log(user);
  }
}

onMounted(() => {
  getFuncionario();
});
</script>

I passed user variable like a props for my components

This "user" variable isn't updated after set my data to API:

user = res.data;

This variable does not reflect in my component

My component

<script>
import { markRaw } from 'vue';

const emptyLayout = 'EmptyLayout';

export default {
  name: 'AppLayout',
  data: () => ({
    layout: emptyLayout,
  }),
  props: {
    user: null,
  },
  watch: {
    $route: {
      immediate: true,
      async handler(route) {
        try {
          const component = await import(`@/layouts/${route.meta.layout}.vue`);

          this.layout = markRaw(component?.default || emptyLayout);
        } catch (e) {
          this.layout = emptyLayout;
        }
      },
    },
  },
};
</script>

Any ideas

Answer 1

I found the answer

I change my variable to

const user = ref(null);

this ref make a reflect in lifecycle

and I set the variable like this

user.value = res.data;