1-old-component.hbs

<p>{{value}}</p>

<button {{action "goUp"}}>Click</button>

1-old-component.js

import Component from '@ember/component'

export default Component.extend({
  tagName: 'nav',
  classNames: 'my-counter',
  attributeBindings: ['data-test-selector'],
  'data-test-selector': 'counter',
  value: 0, // This could collide with an existing component property though 🤷🏽‍♂️
  
  actions: {
    goUp() {
      this.set('value', this.get('value') + 1);
    } 
  }
});

2-new-component.hbs

<nav ...attributes class="my-counter" data-test-selector="counter">
  <p>{{this.value}}</p>

  <button onclick={{this.goUp}}>Click</button>
</nav>

2-new-component.js

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';

export default class MyCounter extends Component {
  @tracked value = 0; // No collisions since glimmer component only has a small number of methods/properties

  goUp = () => this.value ++;
}