how to use getSelection() on timeline chart of vue-google-charts. in composition api

Question

I've been trying to implement timeline chart using vue-google-chart in a Quasar framework. libraries are ( vue3.0, quasar 2.6, vue-google-chart 1.1.0 )
I looked over questions and instructions but there were not exactly fit my environment. Last one I found is this https://codesandbox.io/s/vue-google-charts-events-handling-forked-hsivrq?file=/src/App.vue which is vue2 and vue-google-charts works till 0.3.2

I tried to transform it into vue3 and composition api style but failed, and error message shows chartObject is undefined. probably vue-google-charts updated and there were changes.
but I don't know where to find substitute object. I am new to js so can't really get js code from google-developer changed to vue wrapper style.
I made codepen which i tried with example codes and successed made an event to make console.log but still have problem to get data from bar on the chart which i selected.
what i want exactly is that to get row and column data from selected bar then I could manipulate chart

<template>
  <div>
    <GChart
      type="Timeline"
      :data="chartData"
      :settings="{ packages: ['timeline'] }"
      :events="chartEvents"
      ref="gChart"
    />
  </div>
</template>
<script>
import { GChart } from "vue-google-charts";
import { ref } from "vue";
const columns = [
  { type: "string", label: "Position" },
  { type: "string", label: "Name" },
  { type: "string", id: "style", role: "style" },
  { type: "date", label: "Start Date" },
  { type: "date", label: "End Date" },
];
const rows = [
  ["1", "test1", "#181818", new Date("2022-1-1"), new Date("2022-2-6")],
  ["2", "test2", "#e3d3b2", new Date("2022-1-5"), new Date("2022-1-20")],
  ["3", "test3", "#d3e932", new Date("2022-1-3"), new Date("2022-1-13")],
];
export default {
  name: "timeline",
  components: {
    GChart,
  },
  setup() {
    const chartData = [columns, ...rows];
    return {
      chartData,
      chartEvents: {
        select: () => {
          const gChart = ref();
          const chart = gChart.chartObject;
          const selection = chart.getSelection();
          console.log(selection[0]);
        },
      },
    };
  },
};
//
</script>

here is codepen https://codesandbox.io/s/vibrant-resonance-fbqosd?file=/src/components/TimeLine.vue:0-1154
I really need help...

Answer 1

You can try by just invoking the function directly and then can play with the properties from the result.

chartEvents: {
    select: () => {
        const selection = getSelection()
        console.log(selection)
    },
}