Can't Get Selective Bloom Working

I’m following this selective bloom example and trying to implement it using TroisJS with the post processing in a Vue single-file component.

I had initially tried to use the TroisJS components but couldn’t get it to work and instead tried to implement it using pure Three.js and ran into exactly the same issue.

Here’s the sandbox.

The issue is that the bloom effect is not being shown:

From my perspective, I can’t see anything wrong with my implementation and would like to make sure of that before I can conclude it may be something wrong with Trois JS instead. The fact that I get the same issue with Trois JS and pure Three.js suggests there’s something wrong with my code.

For what it’s worth, in all usages of Trois JS, I’ve only ever seen a single EffectComposer being used. I’ve tried using the same RenderPass instance for both EffectComposer instances when using the Trois JS components but still no luck. If anyone has experience with Trois JS, here is my original sandbox.