Fetch data from backend before render

[salueii]

May be this is simple question however I am get stick in it for many hours.
Thing is that before axios fetch data from server , component rendered and this lead to ERROR.
Fetch data code hooked in beforeCreate lifecycle method like this:

data() {
    return {
      CmpObj :null,
    };
  },
beforeCreate() {
    this.$watch(() => this.$route.params,() => {this.fetchData()},{ immediate: true });
  },

methods:{
  fetchData(){
           this.$api.get(`path to the backend`)
                        .then((response) => {
                              <!-- get data from server and set recived data in 
                              this.CmpObj variable defined in componnet data, 
                              and used this.CmpObj in template with v-model 
                              however before this.CmpObj loaded from server 
                              componenet render error come up!--> 
                              this.CmpObj = response.data;
                              })
                        .catch((err) => {console.log(err);});
             }
}

in template we use this.CmpObj like this:

<input v-model="this.CmpObj.name">

I use await/async method however is not work.
any suggestion appreciated.

[Shyam-Chen]

<script lang="ts" setup>
import { ref, onMounted } from 'vue';

const loading = ref(true);

onMounted(async () => {
  await fetch('/api/list');
  loading.value = false;
});
</script>

[salueii]

This do not work 😒 .
I move data fetch function to the setup hook function (VUE ver. 3) but before data load component render occur and error come up.
By the way in setup function we can not access this.$route.params 😒

[Shyam-Chen]

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';

const route = useRoute();

const loading = ref(true);

onMounted(async () => {
  await fetch(`/api/list/${route.params.id}`);
  loading.value = false;
});
</script>

[salueii]

Thank's for your help Shyam-Chen.
I write custom composable function to load data like this :

export function useGetEntObj() {
  const route = useRoute();

  const loading = ref(true);
  const cmpEnt=reactive({});//this line may be changed to something else
  onMounted(async () => {
     let temp=await fetchData();// data loaded from server to temp every thing is OK
     loading.value = false;
    //HOW i could pass recived data as reactive object in cmpEnt to component, component receive null !!!!! 
    cmpEnt=reactive(temp);//this line DO NOT WORK
  });
  function fetchData() {
    return new Promise((resolve,reject)=> {
          const api = axios.create({ baseURL: '....' })
          api.get(`..../${route.params.EntId}`)
                              .then((response) => {
                                resolve(response.data.data);
                              })
                              .catch((err) => {console.info(err);});
        });
      }
  return [cmpEnt,loading]
}

cmpEnt dose not send correctly to component.
HOW to send cmpEnt as reactive object to component ??
in component setup function I have simple code as :

setup(){
  const [cmpEnt, loading] = useGetEntObj();
  //cmpEnt is empty or NULL !!!!
  return {cmpEnt, loading}
},