Invalid watch source for Accordion

[BayBreezy]

Hello,

Thank you for working on this. I am a Nuxt person. I tried recreating the components on the shadcn-ui website with the components from this package and I am getting this warning in the terminal and browser console. It may be Nuxt 3 specific, I am not sure.

Describe the bug I keep gettting this warning in the browser and in the VSCode terminal: [Vue warn]: Invalid watch source: item-1 A watch source can only be a getter/effect function, a ref, a reactive object, or an array of these types.

To Reproduce

This is the component that I created:

Click to see code

```vue ```

This is how the component is being used:

Click to see usage

```vue ```

Expected behavior Well, I expect no warnings

Screenshots Browser

Terminal

Desktop (please complete the following information):

• OS: MacOS & Windows
• Browser Chrome Browser

Additional context Nuxt Info:

• Operating System: Darwin
• Node Version: v16.19.1
• Nuxt Version: 3.6.5
• Nitro Version: 2.5.2
• Package Manager: yarn@1.22.19
• Builder: vite
• User Config: devtools, modules, app
• Runtime Modules: nuxt-icon@0.4.2, @nuxtjs/tailwindcss@6.8.0, @morev/vue-transitions/nuxt@2.3.6
• Build Modules: -

[k11q]

sorry I dont have time to try and make the repro, I think something is wrong with the writableComputed ref, also this should be empty string than empty array since you are using single get: () => props.modelValue ?? [], . Can you try and use useVModel from vue to handle the v-model and see if that fixes it?

[BayBreezy]

I will make the changes & let you know soon. Thanks

[BayBreezy]

@khairulhaaziq here is a link to the reproduction: https://stackblitz.com/edit/nuxt-starter-ws3qeq?file=components%2FUI%2FAccordion.vue

I tried using useVmodel but got the same results.

[BayBreezy]

Remember that this does not break anything, so there is no need to stress over it. I was just bringing it to your attention so it can be looked at later.

[k11q]

hi yeah sorry this warning even appears on our side, so it is not a problem with your implementation. I dont think it is an issue, we will try and find a fix when we have time someday probably, but not a problem at all I think. Thanks so much for the stackblitz, wish everyone does that! Btw are you working on something like shadcn?

[BayBreezy]

No problem, it can be updated some day in the future. For now, it does not break anything.

Yes, I have created shadcn for Nuxt many times over lol. I decided to create it again when I saw this package being worked on. The reason why I keep starting over is because I have to be installing packages from all over the place to get the functionality I need and documenting is a pain. I will share the link to the last iteration that I worked on. My hope is that I can rewrite it one final time with Radix Vue

[k11q]

No problem, it can be updated some day in the future. For now, it does not break anything.

Yes, I have created shadcn for Nuxt many times over lol. I decided to create it again when I saw this package being worked on. The reason why I keep starting over is because I have to be installing packages from all over the place to get the functionality I need and documenting is a pain. I will share the link to the last iteration that I worked on. My hope is that I can rewrite it one final time with Radix Vue

yeah please share it I personally need it 😂. you can contact us directly in discord if you have any more issues

[BayBreezy]

Here it is: Website: duxt-ui.netlify.app Repo: https://github.com/BayBreezy/duxt-ui