Vue warn about getters not being side-effect free

[DamianGlowala]

trafficstars

What package within Headless UI are you using?

@headlessui/vue

What version of that package are you using?

insiders

What browser are you using?

Chrome

Reproduction URL

https://vuejs.org/guide/essentials/computed.html#getters-should-be-side-effect-free

Describe your issue

Seeing Vue warnings about getters not being side-effect free for what to me seems like a Headless UI component.

[wahyubaskara]

Same issue

[faridibin]

Same Issue, started happening after last update

[SummerPaX]

I have also the same issue with headlessui tabs, and I did some digging.

Its possible that this computed might be one of the culprits, because it modifies the SSRContext.

// packages/@headlessui-vue/src/components/tabs/tabs.ts

let mySSRIndex = computed(() => {
  if (SSRContext.value) {
    let mySSRIndex = SSRContext.value.panels.indexOf(props.id)
    if (mySSRIndex === -1) return SSRContext.value.panels.push(props.id) - 1
    return mySSRIndex
  }

  return -1
})

I don't think its that big of an issue because every computed is only executed twice and has no heavy code, but the warning messages are clogging up my console window.Thanks for doing such great work

[m-shum]

Yup exactly the same issue here – happening for me specifically with the Tabs component of nuxtUI. The console noise is a headache for sure.

[MickL]

I think it helps more to just upvote the issue instead of writing "same issue" :)