I am trying to figure out how to re render the packedbubble chart when a prop changes without any good outcome... Before trying to do the "redraw", returning the chart was working fine, not updating with the props changes, but drawing at least something.

So far I have the following code:

<template>
  <div id="thechart"></div>
</template>

export default {
  name: 'OrgChart',
  props: {
    chartData: { ... }
  },
  setup (props) {
    //...
    
    const employeeSeries = []
    const keys = Object.keys(props.chartData)
    keys.forEach((key, index) => {
      employeeSeries.push({
       name: key,
       data: props.chartData[key]
      })
    })

    watch(() => props.chartData, (selection, prevSelection) => {
      redraw()
    })

    function redraw () {
      chart.value.series.setData(employeeSeries, true)
    }

    onMounted(() => {
      var highchartsOptions = {
        chart: {
          type: 'packedbubble',
          height: '50%',
          renderTo: 'thechart'
        },
        //...,
        series: employeeSeries
      }
      chart.value = new HighCharts.chart(highchartsOptions)
    })
    return {
      chart
    }
  }
}
</script>

any idea? Thanks.