vue3 vue-chartjs how to use prop from parent component to child component in mounted()

Question

New to vue and vue-chart, I'm trying to have 2 pies on a page where the undelying query is a parameter (prop)

This my main vue

<template>
    <div>
        <div class="container">
            <h1 class="display-4 mb-5">Home</h1>
            <div>
                <PieComponent :options="A" />
            </div>
            <div>
                <PieComponent :options="B"/>
            </div>
        </div>
    </div>
</template>

<script>
    import PieComponent from './PieComponent.vue'

    export default {
        components: { PieComponent },
        props: ['options']
    }

</script>

This is my component:

<template>
    <Pie v-if="loaded" :options="options" :data="data" />
</template>

<script>

    import { Chart as ChartJS, ArcElement, Tooltip, Legend, Colors} from 'chart.js'
    import { Pie } from 'vue-chartjs'
    import externalDataService from '../services/externalDataService'

    ChartJS.register(ArcElement, Tooltip, Legend, Colors)

    export default {
        name: 'PieComponent',
        components: {
            Pie
        },
        props: ['options'],
        data: () => ({
            loaded: false,
            data: null
        }),
        async mounted() {
            try {
                if (options == "A") {
                    const response = await externalDataService.getA();
                } else {
                    const response = await externalDataService.getB();
                }
                this.data = response.data;
                this.loaded = true;

            }catch (error) {
                console.error(error);
            }

        }
    }
</script>

Now I get that options is not defined. I'm pretty sure I'm misunderstanding the concept of props. If someone could point me in the good direction.

Answer 1

as @yoduh pointed out. it should indeed be this.options