[Potential bug]: Production issue with Listbox: modelValue is not defined

[KlemenS189]

What package within Headless UI are you using?

@headlessui/vue

What version of that package are you using?

v1.6.1

What browser are you using?

Chromium

Reproduction URL

Sample repo

Describe your issue

I am trying to create a reusable component for Listbox. In my repo it is called Select.
The problem occurs when I try to switch between options of Listbox. I get the following error

index.f2068d5e.js:1 ReferenceError: modelValue is not defined
    at De.onUpdate:modelValue.h.<computed>.h.<computed> (index.f2068d5e.js:30:11950)
    at kn (index.f2068d5e.js:1:12921)
    at $t (index.f2068d5e.js:1:13000)
    at $t (index.f2068d5e.js:1:13100)
    at rb (index.f2068d5e.js:1:15048)
    at Object.select (index.f2068d5e.js:4:7542)
    at T (index.f2068d5e.js:4:13814)
    at kn (index.f2068d5e.js:1:12921)
    at $t (index.f2068d5e.js:1:13000)
    at HTMLLIElement.u (index.f2068d5e.js:1:52861)

What is worse is that this only occurs on production environment. In dev mode it all works well.

How to reproduce.

1. Clone repo and run yarn install
2. Run yarn build
3. Run yarn preview and visit link
4. On page there will be a dummy dropdown with Thor written on it. Select it and try to switch to odin from thor
5. The error above will be printed in the console.

Is this a bug, or am I doing something wrong?

[RobinMalfait]

Hey! Thank you for your bug report!
Much appreciated! 🙏

The v-model is a shorthand for :modelValue="x" @update:modelValue="newValue => x = newValue". The issue is that you are giving it a prop directly which is "immutable" in the sense that you can't do props.modelValue = x. What you probably want to do is switch:

- <Listbox v-model="modelValue" @update:modelValue="emitChange">
+ <Listbox :modelValue="modelValue" @update:modelValue="emitChange">

This gets rid of your issue, but you will notice that it doesn't really works. This is because you are using emits('update:modelValue', props.modelValue). So you are firing that update event to the outside world, but you do it with the "old" value (remember because props are not mutable like that).

What you can do instead is this:

const emitChange = (value) => {
  emits('update:modelValue', value)
  emits('changed')
}

[KlemenS189]

Thanks for the review. This fixed the issue.
Good thing that I tagged the issue with "Potential" bug :)