How to get instance of PrimeVue Chart ?

[OleksiiPylypcuk-cnic]

My goal is to share a legend across the two charts.
But I can't figure how I can work with instances.

According to API https://primevue.org/chart/#api.chart.methods
I'm trying to use methods

<template>
  <ThemeSwitcher />
  <div class="card">
    <Chart
      ref="chartRef"
      type="bar"
      :data="chartData"
      :options="chartOptions"
      class="h-[30rem]"
    />
  </div>
  <div>
    {{ chartLegend }}
  </div>
</template>

<script>
import { ref, nextTick } from 'vue';

export default {
  data() {
    return {
      chartData: null,
      chartOptions: null,
    };
  },
  mounted() {
    this.chartData = this.setChartData();
    this.chartOptions = this.setChartOptions();
    // Access the Chart instance after the DOM has updated
    this.$nextTick(() => {
      if (this.$refs.chartRef) {
        const chartInstance = this.$refs.chartRef.getChart();
        if (chartInstance) {
          console.log(chartInstance); // Access the Chart.js instance
        } else {
          console.log('Chart instance is not available');
        }

        // Generate and log the legend
        console.log('Legend', this.$refs.chartRef.generateLegend());
      } else {
        console.log('Chart ref is not available');
      }
    });
  },
  computed: {
    chartLegend() {
      return this.$refs.chartRef.generateLegend();
    },

Console messages:

[Log] Chart instance is not available (App.vue, line 23)
[Log] Legend – undefined (App.vue, line 27)

https://stackblitz.com/edit/3ruwyy?file=src%2FApp.vue

Am I doing something wrong ? I spent hours trying to find a solution, nothing seems to be working.