Vue axios fetch data from api with -

I have this working code.

<template>
<v-card-text class="text-center">{{ ethPrice.ethereum.usd }} US$</v-card-text>
</template>

data() {
 return {
  ethPrice: { "ethereum": { "usd": "" } },
 };
},
mounted() {
 axios
  .get(
    "https://api.coingecko.com/api/v3/simple/price?ids=ethereum&vs_currencies=usd"      
  )
  .then((response) => (this.ethPrice = response.data));

But, when I do the same with this other I get this errors.

<template>
<v-card-text >{{ slpPrice.smooth-love-potion.usd }}</v-card-text>
</template>

 data() {
  return {
  slpPrice: { "smooth-love-potion": { "usd": "" } },
 };
},
mounted() {
 axios
  .get(
    "https://api.coingecko.com/api/v3/simple/price?ids=smooth-love-potion&vs_currencies=usd"      
  )
  .then((response) => (this.slpPrice = response.data));

Why one is working and the other one no? How can I fix this? I tried to make it reactive object, but then the first is not working.

.then((response) => (this.$set(this.ethPrice, response.data)));