Recreate vs Rerender

controllers.application\.js

import Controller from '@ember/controller';
import { action, set } from '@ember/object';
import { tracked } from 'tracked-built-ins';

export default class ApplicationController extends Controller {
	@tracked items = [
    { id: 1, value: 1 },
    { id: 2, value: 2 },
    { id: 3, value: 3 },
  ];

	@action updateItems(item) {
    // 1. replace the whole this.items array
    // this.items = this.items.map((_item) => {
    //   const value = item.id === _item.id ? _item.value + 1 : _item.value;
    //   return { ..._item, value }
    // });
    
    // 2. replace the specified item in this.items
		// const index = this.items.indexOf(item);
		// this.items.replace(index, 1, [{ ...item, value: item.value + 1 }]);
    
    // 3. update the specified property in the specified item
    // set(item, 'value', item.value + 1);
    
    // 4. same as 3. but using tracked property
    // item.value = item.value + 1;
  }
}

templates.application\.hbs

<h1>Rerender v.s. "Recreate"</h1>
<div>
  <a href="https://google.com">Header Link</a>
  <br>
  <a href="https://google.com">Header Link</a>
  <br>
  <a href="https://google.com">Header Link</a>
</div>
<hr>
{{#each this.items as |item|}}
	<Button	@model={{item}}	@updateItems={{fn this.updateItems item}}	/>
{{/each}}
<hr>
<div>
  <a href="https://google.com">Footer Link</a>
  <br>
  <a href="https://google.com">Footer Link</a>
  <br>
  <a href="https://google.com">Footer Link</a>
</div>

templates.components.button\.hbs

<button id={{@model.id}} type="button" {{on "click" @updateItems}}>
	Button {{@model.value}}
</button>

tests.test-helper\.js

import Application from '../app';
import config from '../config/environment';
import { setApplication } from '@ember/test-helpers';
import { assign } from '@ember/polyfills';
import { start } from 'ember-qunit';

let attributes = {
  rootElement: '#test-root',
  autoboot: false
};
attributes = assign(attributes, config.APP);

let application = Application.create(attributes);
setApplication(application);

start();

twiddle\.json

{
  "version": "0.17.1",
  "EmberENV": {
    "FEATURES": {},
    "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": true,
    "_APPLICATION_TEMPLATE_WRAPPER": false,
    "_JQUERY_INTEGRATION": false
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js",
    "ember": "3.18.1",
    "ember-template-compiler": "3.18.1",
    "ember-testing": "3.18.1"
  },
  "addons": {
    "@glimmer/component": "1.0.0",
    "tracked-built-ins": "1.0.2"
  }
}