00_index.html.erb

<div data-controller="counter" data-counter-count-value="7" class="flex flex-col mt-3">
  <div class="text-2xl">
    The count is: <span data-counter-target="result"></span>
  </div>
  <div class="flex space-x-4 mt-4">
    <button class="btn" data-action="counter#increment">+</button>
    <button class="btn" data-action="counter#decrement">-</button>
  </div>
</div>

01_counter_controller.js

import { Controller } from "stimulus";

export default class extends Controller {
  static values = {
    count: Number,
  };

  static targets = ["result"];

  increment() {
    this.countValue = this.countValue + 1;
  }

  decrement() {
    this.countValue = this.countValue - 1;
  }

  countValueChanged() {
    this.resultTarget.innerHTML = this.countValue;
  }
}