Highcharts-vue - Использование наследования.Несколько графиков с общими свойствами

Question

Я пытаюсь применить принципы СУХОЙ к реализации Highcharts Vue.

У меня есть несколько старших диаграмм в моем компоненте Vue, большинство из которых совпадают, за исключением некоторой маркировки и данных серии.Я пытался абстрагироваться от общих свойств без успеха.Рассмотрим следующий компонент Vue:

<template>
    <div>
        <highcharts class="chart" :options="chartOptions" ref="lineChart1"></highcharts>
    </div>
        <highcharts class="chart" :options="chartOptions" ref="lineChart2"></highcharts>
    </div>
</template>

Я хотел бы использовать общие параметры диаграммы, а затем попытаться динамически обновить серию.

computed: {
    chartOptions() {
      return {
        chart: {
          type: "spline"
        },
        title: {
          text: "chart1"
        },
        series: [
          {
            data: [10, 0, 8, 2, 6, 4, 5, 5],
            color: "#6fcd98"
          }
        ]
      };
    }
  },
mounted() {
 this.fetchChart1()
 this.fetchChart2()
}
methods: {
   fetchChart1: function () {
      fetch(`${this.serverURL}/chart1`)
        .then(r => r.json())
        .then(json => { 
            const lineChart = this.$refs.lineChart1
            lineChart.chart.series[0] = json.series
            lineChart.title.text = json.title
         })
        .catch(error => console.error('Error))
    },
    fetchChart2: function () {
      fetch(`${this.serverURL}/chart2`)
        .then(r => r.json())
        .then(json => { 
            const lineChart = this.$refs.lineChart2
            lineChart.chart.series[0] = json.series
            lineChart.title.text = json.title
         })
        .catch(error => console.error('Error))
    },

}

Я даже не уверен, что яПопытка возможна, но мне удалось получить две диаграммы загрузки с использованием подхода, описанного выше, проблема заключается в индивидуальном доступе и обновлении некоторых из их свойств.Ссылка на диаграмму взята из следующего примера, который, как я понимаю, не использует ту же оболочку, но я использовал этот подход для обновления диаграмм в режиме реального времени.

https://codesandbox.io/s/jjyqvv0k13

(см. Пример lineChart)