Problem adding <div> custom-header class to v-slot:header.name

Dashboard
4

Here is the template I don't understand why this is not working. I use the same template for other data and I do not have problem

<template>
  <div>
    <v-card flat>
			<v-card-title class="d-flex align-center pe-2">
				<v-icon icon="mdi-check"></v-icon> &nbsp;
				Pending Trades ({{ msg?.payload[0]?.tradeCount || 0 }})

				<v-spacer></v-spacer>

				<v-text-field
					v-model="search"
					density="compact"
					label="Search"
					prepend-inner-icon="mdi-magnify"
					variant="solo-filled"
					flat
					hide-details
					single-line
				></v-text-field>
			</v-card-title>
		</v-card>
    <!-- Data Table -->
    <v-data-table 
			class="custom-table-background"
      v-model:search="search" 
      :items="msg?.payload" 
      :headers="headers">
      
      <!-- Custom header for Trade# column -->
      <template v-slot:header.trade>
        <div class="custom-header">Trade#</div>
      </template>

      <!-- Custom header for Pair column -->
      <template v-slot:header.pair>
        <div class="custom-header">Pair</div>
      </template>

      <!-- Custom header for Direction column -->
      <template v-slot:header.direction>
        <div class="custom-header">Direction</div>
      </template>

      <!-- Custom header for Entry Price column -->
      <template v-slot:header.buyPrice>
        <div class="custom-header">Entry Price</div>
      </template>
			
			<!-- Custom header for Exit Price at column -->
			<template v-slot:header.sellPrice>
        <div class="custom-header">Exit Price</div>
      </template>
			
			<!-- Custom header for Current Price at column -->
			<template v-slot:header.livePrice>
        <div class="custom-header">Current Price</div>
      </template>
			
			<!-- Custom header for Live Profit column -->
      <template v-slot:header.liveProfit>
        <div class="custom-header">Profit</div>
      </template>

      <!-- Custom header for Status column -->
      <template v-slot:header.status>
        <div class="custom-header">Status</div>
      </template>

      <!-- Displaying Live profit with custom color and percentage -->
      <template v-slot:item.liveProfit="{ item }">
        <v-chip :color="getChipColor(item)">
          {{ item.liveProfit }} %
        </v-chip>
      </template>
	  
			<!-- Displaying Trade Number with custom color and percentage -->
      <template v-slot:item.trade="{ item }">
        <v-chip class="ma-2" color="green" label>
           {{ item.trade }}
        </v-chip>
      </template>

      <!-- Displaying direction (logo, position, margin mode, leverage) -->
      <template v-slot:item.direction="{ item }">
        <div class="trade-container">
          <img :src="item.logoUrl" :alt="`${item.symbol} logo`" class="trade-logo" />
          <div class="trade-details">
            <span class="trade-position">{{ item.position }}</span><br />
            <span class="trade-margin">{{ item.marginMode }} {{ item.leverage }}X</span>
          </div>
        </div>
      </template>

    </v-data-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      search: '', // Search query
      headers: [
        { title: 'Trade#', key: 'trade' },
        { title: 'Pair', key: 'pair' },
        { title: 'Direction', key: 'direction' },
        { title: 'Entry Price', key: 'buyPrice' },
	{ title: 'Exit Price', key: 'sellPrice' },
	{ title: 'Current Price', key: 'livePrice' },
	{ title: 'Current Profit', key: 'liveProfit' },
        { title: 'Status', key: 'status' },
      ]
    };
  },
  props: {
    msg: {
      type: Object,
      required: true
    }
  },
  methods: {
    // Determine the color of the profit chip based on profit value
    getChipColor(item) {
      if (item !== undefined) {
        if (item.liveProfit > 0) {
          return 'green';  // Profit is positive
        } else if (item.liveProfit < 0) {
          return 'red';    // Profit is negative
        } else {
          return 'orange'; // Profit is neutral
        }
      }
    }
  }
};
</script>

<style>
/* Helper classes */
.bg-basil {
  background-color: #0D1B2A !important;
}
.text-basil {
  color: #E0E1DD !important;
}
/* ============ Closed Styles ============ */
/* Styling the container that holds logo, position, margin */
.trade-container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/* Style for the trade logo */
.trade-logo {
  width: 30px;
  height: 30px;
  margin-right: 20px;
  vertical-align: middle;
  padding: 0;
}

/* Style for the trade details */
.trade-details {
  margin: 0;
  padding: 0;
  text-align: left;
}

/* Style for the trade position text */
.trade-position {
  color: #9ACD32; /* Green color */
  margin: 0;
  padding: 0;
}

/* Style for the margin mode and leverage */
.trade-margin {
  color: #9ACD32; /* Green color */
  margin: 0;
  padding: 0;
}
/* Style for the header */
.custom-header {
  color: #E0E1DD;
  font-weight: bold;
  padding: 10px;
}
.custom-table-background {
  background-color: #1B263B; /* Dark background example */
  border-radius: 12px; /* Customize the value for more or less rounding */
  overflow: hidden; /* Ensures content stays within the rounded corners */
  margin-top: 20px; /* Adds top margin */
}
</style>

Here is the example of object from the array

[
    {
        "trade": "#15",
        "pair": "BTCUSDT",
        "position": "Long",
        "logoUrl": "https://static.coinpaprika.com/coin/btc-bitcoin/logo.png",
        "symbol": "BTCUSDT",
        "marginMode": "Cross",
        "leverage": 20,
        "buyPrice": 1000.14,
        "sellPrice": 1000.98,
        "livePrice": 1000.63,
        "closed": "undefined",
        "status": "Pending",
        "profit": 1.84,
        "opened": "Oct 17th, 22, 23:06",
        "liveProfit": "10.52",
        "tradeCount": 20
    }
]