\n \u003CUTable :data=\"data\">\n \u003Ctemplate #empty>\n no data\n \u003C/template>\n \u003C/UTable>\n \u003C/div>\n\u003C/template>\n\n````\nIn this example, if the table's data is initially empty and then updated (by clicking the \"rerender\" button), you will notice that the content in the empty slot disappears. This indicates that the table's data is no longer empty, yet nothing is rendered in the table. The reason is that the table's columns are not reactive. I believe this limitation is caused by TanStack.\n\n### Potential Solution\n```vue\nwatch(columns, (newColumns) => {\n tableApi.setOptions((prevOpt) => ({\n ...prevOpt,\n columns: newColumns \n }))\n}) \n```\n\n\n\n\n### Additional context\n\n```vue\n\u003Cscript setup lang=\"ts\">\nimport { watch } from 'vue'\nimport { getCoreRowModel, useVueTable } from '@tanstack/vue-table'\ntype Data = {\n id: number,\n name: string\n}\n\nconst defaultData = [\n {\n id: 1,\n name: \"a\"\n },\n {\n id: 2,\n name: \"b\"\n }\n]\n\nconst data = ref\u003CData[]>([])\nconst columns = computed(() => Object.keys(data.value[0] ?? {}).map((accessorKey: string) => ({ accessorKey, header: accessorKey })))\n\nconst tableApi = useVueTable({\n data,\n columns: columns.value,\n getCoreRowModel: getCoreRowModel()\n})\n\nconst rerender = () => {\n if (!data.value.length) {\n\n data.value = defaultData\n } else {\n data.value = []\n }\n}\n\n/* watch(columns, (newColumns) => {\n tableApi.setOptions((prevOpt) => ({\n ...prevOpt,\n columns: newColumns \n }))\n}) */\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv>\n \u003CUButton label=\"rerender\" @click=\"rerender()\" />\n \u003Cdiv>\n {{ columns }}\n \u003C/div>\n \u003Cbr>\n \u003Cdiv>\n {{ tableApi.options }}\n \u003C/div>\n \u003C/div>\n\u003C/template>\n\n```\n\nnoticed that tableApi's columns won't change along with updates to the data",[3068,3070],{"name":3036,"color":3069},"a2eeef",{"name":3022,"color":3023},2689,"[Table] reactive columns for auto-generated UTable columns","2024-11-21T13:11:03Z","https://github.com/nuxt/ui/issues/2689",0.73377544,{"description":3077,"labels":3078,"number":3081,"owner":3025,"repository":3026,"state":3051,"title":3082,"updated_at":3083,"url":3084,"score":3085},"https://www.radix-vue.com/components/select.html#scrollupbutton",[3079,3080],{"name":3036,"color":3069},{"name":3022,"color":3023},2145,"[Select] Handle scroll buttons","2025-04-21T20:05:00Z","https://github.com/nuxt/ui/issues/2145",0.73987824,{"description":3087,"labels":3088,"number":3091,"owner":3025,"repository":3042,"state":3051,"title":3092,"updated_at":3093,"url":3094,"score":3095},"\n",[3089],{"name":3019,"color":3090},"ff281a",566,"[Docs] Switch between framework `v2` and `v3` swiper error","2023-02-15T12:32:33Z","https://github.com/nuxt/nuxt.com/issues/566",0.74075115,{"description":3097,"labels":3098,"number":3091,"owner":3025,"repository":3105,"state":3051,"title":3106,"updated_at":3107,"url":3108,"score":3095},"I'm currently trying to implement component tests for a component that uses `vue-i18n` and I'm getting this error:\r\n\r\n```\r\nSyntaxError: Need to install with `app.use` function\r\n - /var/www/html/node_modules/@intlify/core-base/node_modules/@intlify/message-compiler/dist/message-compiler.cjs.js:58:19\r\n - /var/www/html/node_modules/vue-i18n/dist/vue-i18n.runtime.esm-bundler.js:105:34\r\n - /var/www/html/node_modules/vue-i18n/dist/vue-i18n.runtime.esm-bundler.js:2224:15\r\n - /components/metronic/form/Input.vue:326:1\r\n - /var/www/html/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:171:22\r\n - /var/www/html/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7194:29\r\n - /var/www/html/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7149:11\r\n - /var/www/html/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5480:13\r\n - /var/www/html/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5455:17\r\n - /var/www/html/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5059:21\r\n```\r\n\r\nI have `@intlify/nuxt3` configured in my `nuxt.config.ts`:\r\n\r\n```typescript\r\nexport default defineNuxtConfig({\r\n modules: [\"@pinia/nuxt\", \"@nuxtjs/tailwindcss\", \"@intlify/nuxt3\", \"@nuxtjs/google-fonts\", \"@vueuse/nuxt\", \"nuxt-vitest\"],\r\n intlify: {\r\n localeDir: \"locales\",\r\n vueI18n: {\r\n locale: \"de\",\r\n },\r\n },\r\n// ...\r\n```\r\n\r\nI'm working around this problem by manually using `createI18n` in my setup file and adding it to the global plugins of vue test-utils:\r\n\r\n```typescript\r\nimport { config } from '@vue/test-utils';\r\nimport { createI18n } from 'vue-i18n';\r\n\r\nconfig.global.plugins.push(\r\n createI18n({\r\n locale: 'de',\r\n legacy: false,\r\n })\r\n);\r\n```\r\n\r\nThen, since I'm also testing using `@testing-library/vue` which has another [bug](https://github.com/testing-library/vue-testing-library/issues/279), I also have to use the workaround described [there](https://github.com/testing-library/vue-testing-library/issues/279#issuecomment-1336396037) to also get the plugin working for testing-library.\r\n\r\nI know there is nobody to blame but component tests are DX-wise very bad. I have to invest more time into getting the tests to actually work, than writing them :/",[3099,3102],{"name":3100,"color":3101},"vitest-environment","b60205",{"name":3103,"color":3104},"needs reproduction","DE7793","test-utils","Vue-I18n not loaded","2024-07-02T19:50:37Z","https://github.com/nuxt/test-utils/issues/566",{"description":3110,"labels":3111,"number":3113,"owner":3025,"repository":3042,"state":3051,"title":3114,"updated_at":3115,"url":3116,"score":3117},"https://content-v2.nuxtjs.org/guide/writing/mdc#props\n\n",[3112],{"name":3019,"color":3090},496,"[Milkdown] On serialize, component props should keep their current format `inline` or `yaml`","2023-06-06T12:14:53Z","https://github.com/nuxt/nuxt.com/issues/496",0.74095917,{"description":3016,"labels":3119,"number":3113,"owner":3025,"repository":3105,"state":3051,"title":3121,"updated_at":3122,"url":3123,"score":3117},[3120],{"name":3100,"color":3101},"documentation/examples","2023-12-02T22:52:29Z","https://github.com/nuxt/test-utils/issues/496",["Reactive",3125],{},["Set"],["ShallowReactive",3128],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fF_mAhEwmifjBPrKD6i4nT2oqJpltorJkO6bYvqIjqjA":-1},"/nuxt/nuxt.com/1028"]