Template literal in UI breaks toggle event listener?

Questions
1

I have the following code:

<div class="list list-strong list-dividers-ios inset">
  <ul>
      <li>
          <label class="item-content">
            <!-- THIS FOLLOWING PASSAGE IS CAUSING THE PROBLEM -->
            ${!userIsBoard.value && $h`
                <div class="item-media">
                    <i class="f7-icons">lock</i>
                </div>    
            `}
             <!-- END OF PASSAGE -->
             <div class="item-inner">
                <div class="item-title">Für gesamten Verein sichtbar</div>
                <div class="item-after">
                   <div class="toggle" id="toggle-reach">
                        <input type="checkbox" />
                        <span class="toggle-icon"></span>
                   </div>
                 </div>
              </div>
          </label>
       </li>
   </ul>
</div>

[...]
const userIsBoard = $ref(false);

[...]
userIsBoard.value = true; // SOME TIME LATER AFTER pageInit

let reachToggle = $f7.toggle.create({
    el: '#toggle-reach',
    on: {
        change: function (e) {
            console.log('Toggle changed', e.checked); // THIS WORKS WHEN THE PASSAGE ABOVE IS NOT PRESENT
        }
    }
});

I manually initialized the toggle element and attached an event listener for the change event. With the code passage (as pointed out in the snippet) being present, the event listener stops working! However, WITHOUT the passage, everything works fine.

Can somebody explain why this is happening?