各位前輩好

程式框架為VUE，運用axios讀取API後端資料繪製圖表。
目標是點取選項後，根據選項變化圖表內容
嘗試使用watch以監聽數據，並觸發相對應處理，但幾經嘗試後皆失敗，想請各位前輩指點問題出於何處?感謝!

json 資料1 (/year)

	{
		"year": 2021,
		"id": 0
	},
	{
		"year": 2022,
		"id": 1
	},
...

json 資料2 (/treemap)

	{
		"id": 0,
		"month": 8,
		"day": 23,
		"use_total_time": 119.2,
		"year": 2021
	},
	{
		"id": 1,
		"month": 7,
		"day": 28,
		"use_total_time": 0.1,
		"year": 2022
	},
    ...

定義html

   <div class="select">
     <select v-model="selectedYear">
       <option
         v-for="item in selectedOneYear"
         :value="item.year"
         :key="item.id"
       >
         {{ item.year }}
       </option>
     </select>
    <v-chart
      class="chart"
      :option="option"
      :update-options="{ notMerge: true }"
    />
</template>

運用axios取得api的資料

  async created() {
    axios.get(config.$api_url + "/treemap").then((response) => {
      this.time1 = response.data.data[0].year; //起始
      this.time2 = response.data.data[response.data.data.length - 1].year; //結束
      axios.get(config.$api_url + "/year").then((response) => {
        this.selectedOneYear = response.data.data;
      });
      axios
        .post(config.$api_url + "/treemap", {
          time1: this.time1,
          time2: this.time2,
        })
        .then((response) => {
          response.data.data.forEach((element) => {
            let set = [
              element.day - 1,
              element.month - 1,
              element.use_total_time,
            ];
            data.push(set);
          });
        });
    });
  },

watch監控取得當前資料(無效)

  watch: {
    selectedYear: {
      handler: function (val) {
        const t2 = this.time2;
        axios
          .post(config.$api_url + "/treemap", { selectedYear: val, time2: t2 })
          .then((response) => {
            this.tableDatasets = response.data.data;
            console.log(response.data.data); //無資料顯示
            data.splice(0, data.length);
            response.data.data.forEach((element) => {
              let set = [
                element.day - 1,
                element.month - 1,
                element.use_total_time,
              ];
              data.push(set);
            })
          });
      },
    },
  },

大致架構

//定義html
<template>
    <div class="select">
      <select v-model="selectedYear">
        <option
          v-for="item in selectedOneYear"
          :value="item.year"
          :key="item.id"
        >
          {{ item.year }}
        </option>
      </select>
    </div>
    <v-chart
      class="chart"
      :option="option"
      :update-options="{ notMerge: true }"
    />
</template>

<script>
import axios from "axios";
import { config } from "../../config.js";

let data = []

export default {
  components: {
    DatePicker,
    VChart,
  },

  data() {
    return {
      time1: "",
      time2: "",
      ...
      option: {
       ...
      },
    };
  },
  
  async created() {
    axios.get(config.$api_url + "/treemap").then((response) => {
      this.time1 = response.data.data[0].year; //起始
      this.time2 = response.data.data[response.data.data.length - 1].year; //結束
      this.allYear = response.data.data;
      axios.get(config.$api_url + "/year").then((response) => {
        this.selectedOneYear = response.data.data;
      });
      axios
        .post(config.$api_url + "/treemap", {
          time1: this.time1,
          time2: this.time2,
        })
        .then((response) => {
          response.data.data.forEach((element) => {
            let set = [
              element.day - 1,
              element.month - 1,
              element.use_total_time,
            ];
            data.push(set);
          });
        });
    });
  },
  watch: {
    selectedYear: {
      handler: function (val) {
        const t2 = this.time2;
        axios
          .post(config.$api_url + "/treemap", { selectedYear: val, time2: t2 })
          .then((response) => {
            this.tableDatasets = response.data.data;
            console.log(response.data.data);//無資料顯示
            data.splice(0, data.length);
            response.data.data.forEach((element) => {
              let set = [
                element.day - 1,
                element.month - 1,
                element.use_total_time,
              ];
              data.push(set);
            });
            */
          });
      },
    },
  },
};
</script>

有將值寫入select選單中，但按了無效。