\n\u003C/UDropdownMenu>\n```\n\n### Logs\n\n```shell-script\n\n```",[2950,2951,2954],{"name":2868,"color":2869},{"name":2952,"color":2953},"needs reproduction","CB47CF",{"name":2871,"color":2872},3546,"`UAvatar` doesn't trigger `UDropdownMenu`","2025-03-28T17:43:01Z","https://github.com/nuxt/ui/issues/3546",0.70027155,{"description":2961,"labels":2962,"number":2969,"owner":2877,"repository":2877,"state":2922,"title":2970,"updated_at":2971,"url":2972,"score":2973},"### 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_",[2963,2966],{"name":2964,"color":2965},"3.x","29bc7f",{"name":2967,"color":2968},"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":2975,"labels":2976,"number":2978,"owner":2877,"repository":2877,"state":2922,"title":2979,"updated_at":2980,"url":2981,"score":2982},"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>",[2977],{"name":2940,"color":2941},207,"Can't use data inside component","2023-01-18T15:38:39Z","https://github.com/nuxt/nuxt/issues/207",0.7046015,["Reactive",2984],{},["Set"],["ShallowReactive",2987],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fohY7ifBeceJogQKCRQA1tCTzP-TebPoXqMyHSym5bOI":-1},"/nuxt/test-utils/554"]