Не могу сделать D3 график в Vue.js реактивный

Я хочу сделать график D3 реактивным, чтобы он перезаписывался при заполнении новых данных. Запросы api для извлечения новых данных работают нормально,но график не повторяется. Я нашел странное поведение, то есть когда я делаю изменения в моем компоненте диаграммы в моей IDE и сохраняю их, новые данные отображаются.

Здесь я инициализирую компонент в моем родителе:

<div class="md-layout-item md-medium-size-100 md-xsmall-size-100 md-size-100">
        <line-chart v-bind="lineChartProps"></line-chart>
      </div>

Это реквизиты, которые я передаю дочернему компоненту:

computed: {
    dayData() {
      return [
        {
          name: "R1",
          values: [
            {
              date: "00:00",
              value: "0"
            }
          ]
        }
      ];
    },
    lineChartProps() {
      return {
        xAxisLabel: "Timeline",
        yAxisLabel: "Load",
        xKey: "date",
        yKey: "value",
        interval: "minute",
        data: this.dayData
      };

Вот как я заполняю данные:

methods: {
    async queryLoad() {
      const connect = await Service.connectTo;
      const apiResponse1 = await Service.getLoad("DG1", this.i.toString());
      const apiResponse2 = await Service.getLoad("DG2", this.i.toString());
      const apiResponse3 = await Service.getLoad("R1", this.i.toString());

      if (this.i <= 96) {
        this.dayData[0].values.push({
          date: this.timeStepMap.times[this.i],
          value: apiResponse3.request.response
        });

        this.dayData[1].values.push({
          date: this.timeStepMap.times[this.i],
          value: apiResponse1.request.response
        });
        this.dayData[2].values.push({
          date: this.timeStepMap.times[this.i],
          value: apiResponse2.request.response
        });
        this.i++;
      }
    },
    startInterval() {
      setInterval(async () => {
        console.log("1");
        const load = await this.queryLoad();
        return load;
      }, 8000);
    }

Так что теперь в моем детском компоненте у меня есть реквизит:

props: {
    chartId: {
      type: String,
      default: () => `linechart-${Date.now()}`
    },
    colors: { type: Array, default: () => d3.schemeCategory10 },
    width: { type: String, default: "100%" },
    height: { type: String, default: "300px" },
    xAxisLabel: { type: String, default: null },
    yAxisLabel: { type: String, default: null },
    xKey: { type: String, required: true /* date */ },
    yKey: { type: String, required: true /* price */ },
    interval: { type: String, default: "year" },
    data: {
      type: Array,
      default: () => []
    }

Когда я заполняю его начальными значениями и вызываю renderChart в mounted (), все отображается так, как ожидалось. Итак, у меня есть наблюдатель в моем детском компоненте:

watch: {
    data() {
      this.renderChart();
    }

Поэтому, когда я добавляю консоль.войти т. е. в data() и сохранить компонент в моей IDE, компонент показывает реактивное поведение и обновляет график, но я не могу понять, почему это не происходит автоматически. Есть ли что-то или мне скорее рефакторинг и положить эти вызовы API в мой дочерний компонент?

Я получил график d3 из этого РЕПО на github и изменил его для своей цели. Поэтому vue-loader используется для инкапсуляции Sass, но я сомневаюсь, что из-за этого есть какие-либо помехи. Любая помощь будет принята с благодарностью.