show Api response in el-drawer

Question

 <el-drawer
v-model="drawer"
title="I am the title"
:direction="ltr"
:before-close="handleClose">
  <span>Hi, there!</span>
  <span>Name: {{details.name}}</span>
</el-drawer>
<el-card class="box-card" style="margin: 10px" @click="getDetails(id);drawer = true;">
  <el-row>
     //card information
  </el-row>
</el-card>

<script setup lang="ts">
  import axios from 'axios'
  const getDetails=(id:number)=>{
    let body = {
          id: id
        };
      axios.post(import.meta.env.VITE_API_ENDPOINT+'getdetails',body)
        .then(response => {
            details=response.data   
            //this.drawer=true 
            console.log("res +> ",details.name)    
        });
  }
</script>

In above code I am trying to call api on card click, on success el-drawer will open & shown the response data. but in my case async data showing empty