[Vue.js]: fill-color: interpolate doesn't work with feature-state input

[aentwist]

maplibre-gl-js version: 5.15.0

browser: Firefox and Chrome

Steps to Trigger Behavior

1. Use maplibre in a Vue.js app
2. Add data (included in both repros)
3. Configure the fill layer to paint using interpolate 2 colors from 0 to 100 with an input of ["get", "a"] (PASS)
4. Loop over features and on each set feature state "b" to the value of the feature property "a". Maybe call map.triggerRepaint.
5. Configure the fill layer to paint using interpolate the same with an input of ["feature-state", "b"] (FAIL IN VUE)

Link to Demonstration

Vanilla (PASS): https://jsbin.com/tilijadexi/edit?js,console,output
Vue (FAIL): https://github.com/aentwist/maplibre-interpolation-repro
-> npm ci + npm start

Expected Behavior

When using interpolation with the feature-state input, intermediate colors will be interpolated.

Actual Behavior

Intermediate colors are not interpolated. Color falls back to black.

Notes

• interpolate without feature-state works
• step with feature-state works

[aentwist]

Having extreme trouble either reproducing or fixing the code in question. Changing approach to spinning up a blank Vue app to directly match the environment.

[aentwist]

From having to reproduce this it feels like the issue from hell. Vue only, so my closing notes will be that it feels like shadow DOM messing.

[aentwist]

I need feature-state here, at least for the foreseeable future, so my workaround is use AI to generate a goofy long list of values for the step function.