\r\n\t\u003C/div>\r\n\r\n\t\u003Cdiv class=\"m-auto mt-6 flex flex-col flex-wrap items-center justify-center gap-2\">\r\n\t\t\u003Cspan\r\n\t\t\tv-for=\"sensor of boxData.data.value?.sensors || []\"\r\n\t\t\tclass=\"cursor-pointer text-center text-neutral-300\"\r\n\t\t\t@click=\"() => (selectedSensor = sensor._id)\"\r\n\t\t>\r\n\t\t\t\u003Cp class=\"flex items-center justify-center gap-1 text-lg font-semibold underline underline-offset-2\">\r\n\t\t\t\t\u003Cspan>{{ sensor.title }}\u003C/span>\r\n\t\t\t\u003C/p>\r\n\t\t\u003C/span>\r\n\t\u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript lang=\"ts\" setup>\r\nimport { ChartData, ChartOptions } from 'chart.js';\r\nimport 'chartjs-adapter-moment';\r\nimport { getBox, getData } from 'opensensemap-client';\r\nimport { Scatter } from 'vue-chartjs';\r\n\r\nconst osmBoxID = '591f578c51d34600116a8ea5';\r\n\r\nconst selectedSensor = ref\u003Cstring | null>(null);\r\n\r\nconst boxData = useAsyncData(() => getBox(osmBoxID));\r\nboxData.then((data) => (selectedSensor.value = data.data.value?.sensors[0]?._id || null));\r\n\r\nconst chartData = useAsyncData\u003CChartData\u003C'scatter'>>(\r\n\tasync () => {\r\n\t\tif (selectedSensor.value === null) {\r\n\t\t\treturn { datasets: [] };\r\n\t\t}\r\n\r\n\t\tconst fechedData = await getData(osmBoxID, selectedSensor.value);\r\n\r\n\t\treturn {\r\n\t\t\tdatasets: [\r\n\t\t\t\t{\r\n\t\t\t\t\tdata: fechedData.flatMap((e) => ({ y: Number(e.value), x: new Date(e.createdAt).valueOf() })),\r\n\t\t\t\t\tbackgroundColor: '#3b82f6'\r\n\t\t\t\t}\r\n\t\t\t]\r\n\t\t};\r\n\t},\r\n\t{\r\n\t\twatch: [selectedSensor]\r\n\t}\r\n);\r\n\r\nconst chartOptions = computed\u003CChartOptions\u003C'scatter'>>(() => {\r\n\tconst primaryColor = '#d4d4d4';\r\n\tconst secondaryColor = '#525252';\r\n\r\n\tconst sensor = boxData.data.value?.sensors.find((e) => e._id === selectedSensor.value);\r\n\r\n\treturn {\r\n\t\tresponsive: true,\r\n\t\tmaintainAspectRatio: false,\r\n\t\tplugins: {\r\n\t\t\ttitle: {\r\n\t\t\t\ttext: sensor?.sensorType,\r\n\t\t\t\tdisplay: true,\r\n\t\t\t\tfont: {\r\n\t\t\t\t\tsize: 16\r\n\t\t\t\t},\r\n\t\t\t\tcolor: primaryColor\r\n\t\t\t},\r\n\t\t\tlegend: {\r\n\t\t\t\tdisplay: false\r\n\t\t\t},\r\n\t\t\ttooltip: {\r\n\t\t\t\tmode: 'nearest',\r\n\t\t\t\tusePointStyle: true\r\n\t\t\t}\r\n\t\t},\r\n\t\tscales: {\r\n\t\t\tx: {\r\n\t\t\t\ttype: 'time',\r\n\t\t\t\ttime: {\r\n\t\t\t\t\tminUnit: 'hour',\r\n\t\t\t\t\tdisplayFormats: {\r\n\t\t\t\t\t\thour: 'DD.MM. HH:mm',\r\n\t\t\t\t\t\tday: 'DD.MM.YYYY'\r\n\t\t\t\t\t},\r\n\t\t\t\t\ttooltipFormat: 'DD.MM.YYYY HH:mm [Uhr]'\r\n\t\t\t\t},\r\n\t\t\t\tgrid: {\r\n\t\t\t\t\tdrawOnChartArea: false,\r\n\t\t\t\t\tcolor: primaryColor\r\n\t\t\t\t},\r\n\t\t\t\tborder: {\r\n\t\t\t\t\tcolor: primaryColor\r\n\t\t\t\t},\r\n\t\t\t\tticks: {\r\n\t\t\t\t\tmaxTicksLimit: 5,\r\n\t\t\t\t\tautoSkip: true,\r\n\t\t\t\t\tcolor: primaryColor\r\n\t\t\t\t}\r\n\t\t\t},\r\n\t\t\ty: {\r\n\t\t\t\ttitle: {\r\n\t\t\t\t\ttext: `${sensor?.title} (${sensor?.unit})`,\r\n\t\t\t\t\tdisplay: true,\r\n\t\t\t\t\tcolor: secondaryColor\r\n\t\t\t\t},\r\n\t\t\t\tgrid: {\r\n\t\t\t\t\tdrawOnChartArea: false,\r\n\t\t\t\t\tcolor: primaryColor\r\n\t\t\t\t},\r\n\t\t\t\tborder: {\r\n\t\t\t\t\tcolor: primaryColor\r\n\t\t\t\t},\r\n\t\t\t\tticks: {\r\n\t\t\t\t\tcolor: primaryColor\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\t};\r\n});\r\n\u003C/script>\r\n```\r\n\r\n### Expected behaviour:\r\n0. Page is entered\r\n1. Fetch data of the weather station.\r\n2. Set `selectedSensor` to the first sensor of the weather station\r\n3. Fetch the history data for the `selectedSensor`\r\n4. Adjust and display data\r\n\r\n### Actual behaviour:\r\nWorks when switching between the routes.\r\nDoes not work if you reload the page itself.\r\n\r\n-> `boxData` is present, `selectedSensor` is set correctly. `chartData` is triggered when it is initialised, but when the sensor is set during `boxData.then()`, `chartData` does not seem to be aware of this\r\n\r\n### Logs\r\n\r\n_No response_",[3132,3133],{"name":3069,"color":3070},{"name":3020,"color":3021},21857,"`useAsyncData` watcher will not be triggered on page reload","2023-09-15T10:10:42Z","https://github.com/nuxt/nuxt/issues/21857",0.7207081,["Reactive",3140],{},["Set"],["ShallowReactive",3143],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fgVTeIz_wMmkOn52Qp9KGpkA0a7sBOtOZlWdyU__C9Xo":-1},"/nuxt/nuxt.com/638"]