headlessui | Completely unstyled , fully accessible UI components | User Interface library

If you change your json file to js and have it something like this:

I made a small sandbox to demonstrate how you could implement your use case using react-hook-form.

The reason it isn't working is, that you never update react-hook-form's internal state when toggling the switch, you only update your useState. So when you call handleUpdateUser the data that is passed as the argument is the initial data you set via defaultValues.

Actually there is no need to use useState here, as you could just use react-hook-form's internal form state. For this to work you have to use the component react-hook-form provides as the component from Headless UI @headlessui/react is an external controlled component which doesn't expose a ref prop for an actual element ( uses a instead of an element). You can find more info here.

This way to you can also make your more generic for a reuse by providing a value and onChange prop instead of status and setStatus. But of course you could also use these names still. The will provide a value and onChange prop on the field object which i spread on the component.

In your example it isn't clear how your component will receive the initial userData. I assumed you'd make an api request and so i put it in a useEffect. To update the form state after the api call finished you have to use the reset method react-hook-form provides. If you only render when the userData is already loaded you can omit this step and just pass the result to the defaultValues to useForm.

I mocked the api calls with a simple Promise, but you should get the idea.

Component.js

You almost did what you want, only thing you need is props.
people and countries are instance of your child component DataTable.vue and you want to use them in a parent component App.vue.

DataTable.vue :

This should works.

I'm sorry, I cannot exactly point out why your approach is wrong, but it just not how it works. Instead I would do something similar to this:

You should put the dialog higher up in the tree. Usually these can go at the page level, or even the app level, depending on how global these dialogs are.

You can then use your favourite global state manager or the useContext hook to tell these dialogs to open programmatically from anywhere in your app.

In which case the popover closing automatically shouldn't be an issue anymore.

tailwindcss v3 only supports Postcss8 and only create-react-app v5 supports Postcss8 for now. So you need to upgrade the create-react-app to v5. No need for craco in create-react-app v5 as well

First make sure to checkout to different branch or push your code to github before migrating, just for safety.

1.First run npm uninstall @craco/craco autoprefixer postcss tailwindcss
Delete the craco.config.js file
Delete the tailwind.config.js
Now just follow the offical tailwindcss docs
2. Run npm install -D tailwindcss postcss autoprefixer
3. npx tailwindcss init -p
copy paste the tailwind.config.js file from tailwindcss docs
4. npm install react-scripts@latest
5. Now npm start

Later paste your previous tailwind.config theme in the new tailwind.config.js file.

The order of steps may or may not matter but following this steps worked for me.

Uncaught (in promise) TypeError: Failed to execute 'observe' on 'ResizeObserver': parameter 1 is not of type 'Element'.

Looks like it is attempting to bind itself to something other than a native DOM element. In the example on the VueUse site they show native DOM elements with the v-bind directive. However, your code uses v-bind on non-native DOM elements, you have it on a VNode (the ListBox component).

Even looking at the source code you can see that the binding of containerProps expects an HTMLElement.