New Twiddle

components.array-renderer.js

import Ember from 'ember';

export default Ember.Component.extend({
  selectedItem: Ember.computed('valueToShow', function() {
    return this.array.find((element) => element.value === this.valueToShow);
  })
});

components.contextual-component.js

import Ember from 'ember';

export default Ember.Component.extend({
  arrayStore: Ember.inject.service('array-store'),
  array: Ember.computed.readOnly('arrayStore.array')
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  arrayStore: Ember.inject.service('array-store'),
  valueToShow: 2,
  
  actions: {
    changeValueName() {
      Ember.set(this.arrayStore.array[2], 'name', 'Gee');
    }
  }
});

services.array-store.js

import Ember from 'ember';

export default Ember.Service.extend({
  init() {
    this._super(...arguments);
    
    Ember.set(this, 'array', [
      {value: 0, name: 'Item 1'},
      {value: 1, name: 'Item 2'},
      {value: 2, name: 'Item 3'},
      {value: 3, name: 'Item 4'},
      {value: 4, name: 'Item 5'}
    ]);
  }
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{#contextual-component as |context|}}
  {{context.selectedItem valueToShow=valueToShow}}
{{/contextual-component}}
<br>
<br>

<button {{action 'changeValueName'}}>Change value name</button>

templates.components.array-renderer.hbs

{{selectedItem.name}}

templates.components.contextual-component.hbs

{{yield (hash
  selectedItem=(component 'array-renderer' array=array)
 )}}

twiddle.json

{
  "version": "0.15.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.4.3",
    "ember-template-compiler": "3.4.3",
    "ember-testing": "3.4.3"
  },
  "addons": {
    "ember-data": "3.4.2"
  }
}