Status indicator requires browser refresh to display properly

Configuration Frontend
1

I have a “tile” that shows several status indicators. One specifically shows whether we’re all in bed or if someone’s still about. (I use that for motion sensor conditions.)
The problem is, a simple toggle button will show the status accurately, but the status indicator on my tile doesn’t show a change until I refresh the browser.
Is there a way around that?

My 'tile' template 
  mode-tile:
    color_type: card
    aspect_ratio: 3/2
    variables:
      m1_entity: input_boolean.in_bed
    tap_action:
      action: call-service
      service: homeassistant.toggle
      target:
        entity_id: variables.m1_entity
    hold_action:
      action: more-info
    styles:
      card:
        - background-color: darkSlateGrey
        - border-radius: 0%
        - padding: 1%
        - color: ivory
        - font-size: 12px
        - text-transform: capitalize
      grid:
        - grid-template-areas: '"n n n n" "stat stat stat stat" "m1 m1 m1 m1"'
        - grid-template-columns: 1fr 1fr 1fr 1fr
        - grid-template-rows: min-content 1fr min-content
      name:
        - font-weight: bold
        - font-size: 13px
        - color: white
        - align-self: middle
        - justify-self: start
        - padding-bottom: 0px
      custom_fields:
        stat:
          - font-size: 13px
          - align-self: middle
          - justify-self: start
        m1:
          - align-self: middle
          - justify-self: start
    custom_fields:
      stat: |
        [[[
          var icon = "mdi:weather-sunny";
          var status = "Day";
          if (states['sun.sun'].state == "below_horizon") {
            icon = "mdi:moon-waning-crescent";
            status = "Night";
          }
          return `<ha-icon icon=${icon}
          style="width: 34px; height: 34px; color: yellow;">
          </ha-icon><span> ${status}</span>`
        ]]]
      m1: |
        [[[
          var icon = "mdi:walk";
          var status = "about";
          if (states[variables.m1_entity].state == 'on') {
            icon = "mdi:bed";
            status = "in bed";
          }
          return `<ha-icon icon=${icon}
          style="width: 14px; height: 14px; color: deepskyblue;">
          </ha-icon><span> ${status}</span>`
        ]]]

called thusly:

              - entity: sun.sun
                name: Modes
                template: mode-tile
                type: 'custom:button-card'
                variables:
                  m1_entity: input_boolean.in_bed
2

Here’s another clue to this puzzle: I’m working on a “locking spigot button” where a tap on the button will toggle water flow on/off with a timer that will automatically turn the water off again after two hours. The “lock” keeps the water on until you manually turn the water off. If you “unlock” the spigot, it will wait the remainder of two hours (if any) and then shut off. All that works now with one button for the spigot and another for the lock. What I wanted to do was combine the two so that the lock would show as an icon over the spigot. A tap will toggle the water on/off and the hold will toggle the lock on/off.
In this too, the lock status indicator does not reflect the state of the lock unless you refresh the browser but this is only if this functionality is in a template. If you code the button using a more basic template (standard-button) with all the functionality “hard-coded” into the button, it not only works, but the templated button will now also work. (Templated button with no hard-coded button = refresh required. Templated button with hard-coded button = both buttons work without refresh.)
Is that weird or what?

locking spigot button template: 
  locking-spigot-button:
    template: standard-button
    styles:
      grid:
        - position: relative
      custom_fields:
        lock:
          - border-radius: 50%
          - position: absolute
          - left: 0%
          - top: 0%
          - height: 24px
          - width: 24px
          - font-size: 8px
          - line-height: 24px
    custom_fields:
      lock: |
        [[[
          var status = states[variables.lock_entity_name].state;
          var icon = "mdi:lock";
          var color = "darkGreen";
          if (status == "off") {
            icon = "mdi:lock-open-variant";
            color = 'darkRed';
          }
          return `<ha-icon icon="${icon}"
          style="width: 24px; height: 24px; color: ${color};">
          </ha-icon>`
        ]]]
    state:
      - value: 'on'
        id: value_on
        icon: 'mdi:water-pump'
      - value: 'off'
        id: value_off
        icon: 'mdi:water-pump-off'
templated button code: 
                        - entity: switch.outside_tap
                          name: Bib
                          template: locking-spigot-button
                          type: 'custom:button-card'
                          aspect_ratio: 1/1.2
                          variables:
                            lock_entity_name: switch.outside_water_valve_lock
                          hold_action:
                            action: fire-dom-event
                            browser_mod:
                              command: call-service
                              service: homeassistant.toggle
                              service_data:
                                entity_id: switch.outside_water_valve_lock
'hard-coded' button code: 
                        - entity: switch.outside_tap
                          name: Bib
                          template: standard-button
                          type: 'custom:button-card'
                          aspect_ratio: 1/1.2
                          hold_action:
                            action: fire-dom-event
                            browser_mod:
                              command: call-service
                              service: homeassistant.toggle
                              service_data:
                                entity_id: switch.outside_water_valve_lock
                          styles:
                            grid:
                              - position: relative
                            custom_fields:
                              lock:
                                - border-radius: 50%
                                - position: absolute
                                - left: 0%
                                - top: 0%
                                - height: 24px
                                - width: 24px
                                - font-size: 8px
                                - line-height: 24px
                          custom_fields:
                            lock: |
                              [[[
                                var status = states['switch.outside_water_valve_lock'].state;
                                var icon = "mdi:lock";
                                var color = "darkGreen";
                                if (status == "off") {
                                  icon = "mdi:lock-open-variant";
                                  color = 'darkRed';
                                }
                                return `<ha-icon icon="${icon}"
                                style="width: 24px; height: 24px; color: ${color};">
                                </ha-icon>`
                              ]]]
                          state:
                            - value: 'on'
                              id: value_on
                              icon: 'mdi:water-pump'
                            - value: 'off'
                              id: value_off
                              icon: 'mdi:water-pump-off'