Change Callback Not Firing as Expected

I’m new to the Stimulus library so apologies for the basic question. I have a controller with a version value that is mutated by a radio button list in a form. When the value of the radio button changes, I change version to what the user selected. Then I have a change callback function declared that executes the important logic I want to happen, in this case changing the image source for an img tag. Currently, the change callback only fires the first time the controller is connected, but never again.

I have observed that the data attribute in the HTML is changing as expected, but the change callback function is only called the first time.

Controller Code

import { Controller } from "@hotwired/stimulus"

const imageMap = {
  11: '',
  12: '',

export default class extends Controller {
  static targets = [ 'heroImage' ];
  static values = { version: Number }

  changeVersion(event) {
    this.versionValue = Number(event.currentTarget.value);
  versionValueChanged(version) {
    this.heroImageTarget.src = imageMap[version]


    <% (11..12).to_a.reverse.each do |v| 
      id = "#{v}th-gen"
          id=<%= id %>
          value=<%= v %>
          <%= v == 12 ? 'checked' : nil %>
        <label for=<%= id %>><%= "#{v}th Generation" %></label>
    <% end %>

Any help or suggestions to fix this? I think I’m using the change callback as intended.

I had the same issue in Microsoft Edge. After browser restart it works as intended.

My disconnect() wasn’t being triggered, restarting my Chrome solved it.

Memory leak in Chrome? or Stimulus?