HC and vue lifecycle, dynamic options vs updates

[Augustin Riedinger]

We are using HC along with Vue2 and highcharts-vue wrapper for quite some time now and it works fairly well.

But when I try to have deeper control over what's happening between vue and HC, I get confused.

For instance, it is reasonable to set options as a computed prop or should it always be set as a data prop?

It seems to work in most cases with the computed prop but for more complex usages, it won't and one has to use an update method.

Eg.

<template>
  <highcharts :options="options" />
</template>

<script>
export default {
  computed: {
    options() {
       return {
           title: {
            text: this.title, // changes if this.title is updated
          },
          xAxis: {
            crosshair: {
               width: this.crosshairWidth, // doesn't change if this.crosshairWidth is updated
            }
          },
       }
    }
  },
  props: {
    title: { 
      type: String,
    },
    crosshairWidth: {
      type: Number,
    }
  }
}
</script>

So for crosshairWidth I guess the solution could be to add:

watch: {
  crosshairWidth() {
     this.chart.xAxis[0].update({
       crosshair: {
         width: this.crosshairWidth,
       }
     })
  }
}

along with this.chart ref stored on load.

But the question is, shouldn't this be the job of the wrapper to handle those cases? When can we use dynamic options vs. updates?

I'm pretty unclear on how vue and highcharts interact.

Hope it is clear and this gets some interest, since I'm aware vue3 is now here and my change the game on this topic.