Reports

As @DarkBee said, the Twig is rendered server-side, so the components don't exist if they're not rendered on page-load.

If you are not too experienced in JS, or want to avoid it is to have one parent UX Live Component, which contains the three child components. A bit like this:

<div {{ attributes }}>
    {% if this.step == 1 %} 
        <twig:ChildComponent1 /> 
    {% endif %}
    
    {% if this.step == 2 %} 
        <twig:ChildComponent2 /> 
    {% endif %}
    
    {% if this.step == 3 %} 
        <twig:ChildComponent3 /> 
    {% endif %}
</div>

Your parent Live Component would simply hold the LiveProp:

#[LiveProp(writable: true)]
public ?int $step = 1;

79751678