\n\u003C/UDropdownMenu>\n```\n\n### Logs\n\n```shell-script\n\n```",[3091,3092,3095],{"name":3020,"color":3021},{"name":3093,"color":3094},"needs reproduction","CB47CF",{"name":3023,"color":3024},3546,"`UAvatar` doesn't trigger `UDropdownMenu`","2025-03-28T17:43:01Z","https://github.com/nuxt/ui/issues/3546",0.70027155,{"description":3102,"labels":3103,"number":3110,"owner":3029,"repository":3029,"state":3063,"title":3111,"updated_at":3112,"url":3113,"score":3114},"### Environment\r\n\r\n```\r\n------------------------------\r\n- Operating System: `Linux`\r\n- Node Version: `v16.14.2`\r\n- Nuxt Version: `3.0.0`\r\n- Nitro Version: `1.0.0`\r\n- Package Manager: `npm@7.17.0`\r\n- Builder: `vite`\r\n- User Config: `-`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\r\n------------------------------\r\n```\r\n\r\n### Reproduction\r\n\r\nHere is a minimal reproduction:\r\n[https://stackblitz.com/edit/github-u8yyoy?file=app.vue](https://stackblitz.com/edit/github-u8yyoy?file=app.vue)\r\n\r\n### Describe the bug\r\n\r\n`v-model` is behaving weirdly when a value is already set while mounting the component.\r\n\r\nIn the following example the select box initially shows option `A` then the Component re-renders and shows the correct option `B`. However the selected ref is set to `3` from the beginning according to the output in the console when I'm logging the `selected` ref.\r\n\r\n``` vue\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003Cselect v-model=\"selected\">\r\n \u003Coption value=\"2\">A\u003C/option>\r\n \u003Coption value=\"3\">B\u003C/option>\r\n \u003Coption value=\"4\">C\u003C/option>\r\n \u003C/select>\r\n \u003C/div>\r\n\u003C/template>\r\n\u003Cscript setup lang=\"ts\">\r\nimport { ref } from 'vue';\r\nconst selected = ref('3');\r\n\u003C/script>\r\n```\r\n\r\nWhen using the `v-bind` directive and `@change`, everything works fine.\r\n\r\n``` vue\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003Cselect @change=\"(e) => selectedValue = e.target.value\">\r\n \u003Coption value=\"4\" :selected=\"isSelected('4')\">A\u003C/option>\r\n \u003Coption value=\"5\" :selected=\"isSelected('5')\">B\u003C/option>\r\n \u003Coption value=\"6\" :selected=\"isSelected('6')\">C\u003C/option>\r\n \u003C/select>\r\n \u003C/div>\r\n\u003C/template>\r\n\u003Cscript setup lang=\"ts\">\r\nimport { ref } from 'vue';\r\nconst selected = ref('6');\r\nconst isSelected = (value) => selectedValue.value === value\r\n\u003C/script>\r\n```\r\n\r\nMoreover, this error occurs only when using a select box. Other types of input fields (checkbox, radio button, text input) work. Also when doing the same in plain Vue 3 it works.\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[3104,3107],{"name":3105,"color":3106},"3.x","29bc7f",{"name":3108,"color":3109},"upstream","E8A36D",15631,"Select box with v-model updates lazy when mounting the component","2023-01-19T18:30:04Z","https://github.com/nuxt/nuxt/issues/15631",0.70338434,{"description":3116,"labels":3117,"number":3119,"owner":3029,"repository":3029,"state":3063,"title":3120,"updated_at":3121,"url":3122,"score":3123},"Hi,\r\n\r\nI have the following component `components/LastFm.vue` with the following content:\r\n``` vue\r\n\u003Ctemplate>\r\n \u003Cul>\r\n \u003Cli v-for=\"song in songs\">\r\n {{ song.name }}\r\n \u003C/li>\r\n \u003C/ul>\r\n\u003C/template>\r\n\r\n\u003Cscript>\r\nimport axios from 'axios'\r\n\r\nconst apiUrl = 'http://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks'\r\n\r\nexport default {\r\n async data (context) {\r\n let { data } = await axios.get(apiUrl + '&user=visualcookie&limit=3&api_key=XXX&format=json')\r\n return { songs: data.recenttracks.track }\r\n }\r\n}\r\n\u003C/script>\r\n```\r\n\r\nBut I get the following error from Vue:\r\n``` js\r\n[Vue warn]: data functions should return an object:\r\nhttps://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function \r\n(found in component \u003CLastFm> at F:\\work\\github\\v5\\components\\LastFm.vue)\r\nwarn @ vue.runtime.common.js:521\r\ninitData @ vue.runtime.common.js:3174\r\ninitState @ vue.runtime.common.js:3121\r\nVue._init @ vue.runtime.common.js:3378\r\nVueComponent @ vue.runtime.common.js:3500\r\ncreateComponentInstanceForVnode @ vue.runtime.common.js:1724\r\ninit @ vue.runtime.common.js:1734\r\nhydrate @ vue.runtime.common.js:4496\r\nhydrate @ vue.runtime.common.js:4512\r\nhydrate @ vue.runtime.common.js:4512\r\nhydrate @ vue.runtime.common.js:4512\r\nhydrate @ vue.runtime.common.js:4512\r\npatch @ vue.runtime.common.js:4585\r\nVue._update @ vue.runtime.common.js:2635\r\nupdateComponent @ vue.runtime.common.js:2609\r\nget @ vue.runtime.common.js:2934\r\nWatcher @ vue.runtime.common.js:2926\r\nVue._mount @ vue.runtime.common.js:2608\r\n0.Vue$2.$mount @ vue.runtime.common.js:6178\r\ninit @ vue.runtime.common.js:1740\r\n(anonymous) @ vue.runtime.common.js:1894\r\nhydrate @ vue.runtime.common.js:4496\r\npatch @ vue.runtime.common.js:4585\r\nVue._update @ vue.runtime.common.js:2635\r\nupdateComponent @ vue.runtime.common.js:2609\r\nget @ vue.runtime.common.js:2934\r\nWatcher @ vue.runtime.common.js:2926\r\nVue._mount @ vue.runtime.common.js:2608\r\n0.Vue$2.$mount @ vue.runtime.common.js:6178\r\ninit @ vue.runtime.common.js:1740\r\nhydrate @ vue.runtime.common.js:4496\r\nhydrate @ vue.runtime.common.js:4512\r\npatch @ vue.runtime.common.js:4585\r\nVue._update @ vue.runtime.common.js:2635\r\nupdateComponent @ vue.runtime.common.js:2609\r\nget @ vue.runtime.common.js:2934\r\nWatcher @ vue.runtime.common.js:2926\r\nVue._mount @ vue.runtime.common.js:2608\r\n0.Vue$2.$mount @ vue.runtime.common.js:6178\r\ninit @ vue.runtime.common.js:1740\r\nhydrate @ vue.runtime.common.js:4496\r\nhydrate @ vue.runtime.common.js:4512\r\npatch @ vue.runtime.common.js:4585\r\nVue._update @ vue.runtime.common.js:2635\r\nupdateComponent @ vue.runtime.common.js:2609\r\nget @ vue.runtime.common.js:2934\r\nWatcher @ vue.runtime.common.js:2926\r\nVue._mount @ vue.runtime.common.js:2608\r\n0.Vue$2.$mount @ vue.runtime.common.js:6178\r\ninit @ vue.runtime.common.js:1740\r\nhydrate @ vue.runtime.common.js:4496\r\nhydrate @ vue.runtime.common.js:4512\r\npatch @ vue.runtime.common.js:4585\r\nVue._update @ vue.runtime.common.js:2635\r\nupdateComponent @ vue.runtime.common.js:2609\r\nget @ vue.runtime.common.js:2934\r\nWatcher @ vue.runtime.common.js:2926\r\nVue._mount @ vue.runtime.common.js:2608\r\n0.Vue$2.$mount @ vue.runtime.common.js:6178\r\nmountApp @ client.js:322\r\n(anonymous) @ client.js:344\r\n\r\nvue.runtime.common.js:521 [Vue warn]: Property or method \"songs\" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. \r\n(found in component \u003CLastFm> at F:\\work\\github\\v5\\components\\LastFm.vue)\r\n```\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/c177\">#c177\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3118],{"name":3081,"color":3082},207,"Can't use data inside component","2023-01-18T15:38:39Z","https://github.com/nuxt/nuxt/issues/207",0.7046015,{"description":3125,"labels":3126,"number":3130,"owner":3029,"repository":3030,"state":3063,"title":3131,"updated_at":3132,"url":3133,"score":3134},"### Description\n\nI was experimenting with two `UBadge` components and `rounded-e-full`/`rounded-s-full` to achieve a `UButtonGroup` effect, would a `UBagdeGroup` component be to much to ask? :)",[3127,3129],{"name":3059,"color":3128},"a2eeef",{"name":3023,"color":3024},3156,"BadgeGroups!","2025-03-08T12:22:25Z","https://github.com/nuxt/ui/issues/3156",0.7056363,["Reactive",3136],{},["Set"],["ShallowReactive",3139],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fohY7ifBeceJogQKCRQA1tCTzP-TebPoXqMyHSym5bOI":-1},"/nuxt/test-utils/554"]