How to get props details on get Api request with VUE 3?

Hello i'm starting learning VUE 3 with the router and i don't understand how to retrieve data from id ? please

My console log always return undefined ?

Here my code, you can also see on the codesanbox link if you wants too.

https://codesandbox.io/s/vue-router-with-rick-and-morty-api-qdfe12?file=/src/main.js

<script>
import axios from "axios";

export default {
  name: "CharacterById",
  props: ["id", "name", "species", "status"],
  data() {
    return {
      character: null,
      loading: true,
      errored: false,
    };
  },
  mounted() {
    axios
      .get(`https://rickandmortyapi.com/api/character/${this.id}`)
      .then((res) => {
        this.character = res.data.results;
        console.log("GET DETAIL", this.character);
      })
      .catch((error) => {
        console.log(error.message);
        this.errored = true;
      })
      .finally(() => (this.loading = false));
  },
};
</script>

Because you are getting data inside res.data not the res.data.results