Can't refresh an already created binding with fetched options

[bolinocroustibat]

Hello and thanks for this wonderful library!

I have a Tweakpane 4.0.5 pane with a dropdown binding which needs to be populated with options fetched from an external API.
However, after fetching those options, even when doing pane.refresh() and/or a selector.refresh(), no fetched options appear.
What am I missing here? Is that the proper method?

I'm doing:

// Create dropdown
const selector = pane.addBinding({ option: "random" }, "selector", {
	label: "My Options",
	options: {
		Random: "random",
		// Will be populated with more options later
	},
})

// Fetch options for dropdown
fetch(`${EXTERNAL_API}/options`)
	.then((response) => response.json())
	.then((data: { options: Option[] }) => {
		options = data.options
		for (const o of options) {
			const label = `${o.title}`
			const slug = slugify(o.title)
			selector.options[label] = slug
		}
		console.log("Fetched options:", selector.options) // Works fine
		pane.refresh() // Tried this
		selector.refresh() // Also tried this
	})
	.catch((error) => {
		console.error("Failed to fetch movies:", error)
	})

[cocopon]

Thank you for using Tweakpane.

Pane.refresh() is used to force-update a view when a bound value is changed outside the pane.
https://tweakpane.github.io/docs/misc/#refresh

To update the binding with new options, you should dispose of the existing binding and create a new one.

---

Or, if you don't need a binding feature, you can create a dropdown list without binding by Pane.addBlade() with view: 'list' option and it can change its dropdown items by changing .options:
https://tweakpane.github.io/docs/blades/#list

const pane = new Pane();

const b = pane.addBlade({
  view: 'list',
  label: 'scene',
  options: [
    {text: 'loading', value: 'LDG'},
    {text: 'menu', value: 'MNU'},
    {text: 'field', value: 'FLD'},
  ],
  value: 'LDG',
}) as ListBladeApi;

// ...

b.options = [
  // new options...
];