\n\u003C/UDropdownMenu>\n```\n\n### Logs\n\n```shell-script\n\n```",[3206,3207,3210],{"name":3152,"color":3153},{"name":3208,"color":3209},"needs reproduction","CB47CF",{"name":3211,"color":3212},"v3","49DCB8",3546,"ui","`UAvatar` doesn't trigger `UDropdownMenu`","2025-03-28T17:43:01Z","https://github.com/nuxt/ui/issues/3546",0.70027155,{"description":3220,"labels":3221,"number":3228,"owner":3155,"repository":3155,"state":3179,"title":3229,"updated_at":3230,"url":3231,"score":3232},"### 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_",[3222,3225],{"name":3223,"color":3224},"3.x","29bc7f",{"name":3226,"color":3227},"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":3234,"labels":3235,"number":3237,"owner":3155,"repository":3155,"state":3179,"title":3238,"updated_at":3239,"url":3240,"score":3241},"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>",[3236],{"name":3196,"color":3197},207,"Can't use data inside component","2023-01-18T15:38:39Z","https://github.com/nuxt/nuxt/issues/207",0.7046015,{"description":3243,"labels":3244,"number":3248,"owner":3155,"repository":3214,"state":3179,"title":3249,"updated_at":3250,"url":3251,"score":3252},"### 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? :)",[3245,3247],{"name":3175,"color":3246},"a2eeef",{"name":3211,"color":3212},3156,"BadgeGroups!","2025-03-08T12:22:25Z","https://github.com/nuxt/ui/issues/3156",0.7056363,{"description":3254,"labels":3255,"number":3154,"owner":3155,"repository":3178,"state":3179,"title":3257,"updated_at":3258,"url":3259,"score":3161},"To be discussed",[3256],{"name":3175,"color":3176},"Improve sidebar mobile navigation on second level (after click)","2022-05-20T13:10:54Z","https://github.com/nuxt/nuxt.com/issues/297",["Reactive",3261],{},["Set"],["ShallowReactive",3264],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fohY7ifBeceJogQKCRQA1tCTzP-TebPoXqMyHSym5bOI":-1},"/nuxt/test-utils/554"]