\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_",[2073,2074],{"name":2041,"color":2042},{"name":1995,"color":1996},21857,"`useAsyncData` watcher will not be triggered on page reload","2023-09-15T10:10:42Z","https://github.com/nuxt/nuxt/issues/21857",0.72137666,{"description":2081,"labels":2082,"number":2084,"owner":1985,"repository":1985,"state":2001,"title":2085,"updated_at":2086,"url":2087,"score":2088},"Hi all,\r\nthanks for nuxt! I love this project. Still figuring out the feature rich possibilties with it, especially also with vue itself. \r\nNow I'm kinda stuck with \"async components\" and as I couldn't find a related post I thought this could - in case it gets answered ;) - help other people as well.\r\n\r\nI've tried to use the syntax mentioned here: https://vuejsdevelopers.com/2017/07/17/vue-js-2-4-important-features/ to load components asynchronous.\r\n```\r\nimport SyncComponent from './SyncComponent.vue';\r\nconst AsyncComponent = import('./AsyncComponent.vue');\r\n\r\nexport default {\r\n components: {\r\n SyncComponent,\r\n AsyncComponent\r\n }\r\n}\r\n```\r\nThe befenit of this style should be that SSR stil works, but on the client it get's laoded via ajax. Unfortnautely this does not work. The AsyncComponent is not found in this case.\r\n\r\nWhat does work though is \r\n`const AsyncComponent = () => import('~/AsyncComponent.vue'); `\r\n\r\nBut then as far as I can tell, SSR is not working.\r\n\r\nany idea how to accomplish this correctly with nuxt? Or why it does not work by default? Has nuxt regardings async components something else to keep in mind?\r\n\r\nThanks\r\nSimon\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c1939\">#c1939\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2083],{"name":1998,"color":1999},2198,"import of async components","2023-01-18T15:54:59Z","https://github.com/nuxt/nuxt/issues/2198",0.72439903,{"labels":2090,"number":2094,"owner":1985,"repository":1985,"state":2001,"title":2095,"updated_at":2096,"url":2097,"score":2098},[2091,2092,2093],{"name":2052,"color":2053},{"name":1995,"color":1996},{"name":1998,"color":1999},6119,"CSS style render differ between SSR and SPA","2023-01-22T15:34:44Z","https://github.com/nuxt/nuxt/issues/6119",0.7256376,["Reactive",2100],{},["Set"],["ShallowReactive",2103],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"MrW_bKLIE5albUQ_YJpwXgY3qARLk3ZfaGXZ3VpOrYU":-1},"/nuxt/nuxt/3088"]