hash creates new object

components.my-composer\.js

import Component from "@ember/component";

export default Component.extend({
  hashOptionsChanged: Ember.observer("hashOptions.foo", function() {
    console.log(
      "hashOptions changed", 
      "guid for hashOptions: " +  Ember.guidFor(this.hashOptions), 
      "guid for hashOptions.foo: " + Ember.guidFor(this.hashOptions.foo)
    );
  }),
    
  optionChanged: Ember.observer("option", function() {
    console.log("option else changed");
  }),
  
  didUpdateAttrs() {
    this._super(...arguments);
    
    console.log("didUpdateAttrs hashOptions guid: " + Ember.guidFor(this.attrs.hashOptions));
  }
});

controllers.application\.js

import Controller from '@ember/controller';

export default class ApplicationController extends Controller {
  appName = 'Ember Twiddle';

	value = 'default';
}

templates.application\.hbs

<h1>Demo that hash helper is creating new object</h1>

<p>
	If you change the input and watch the console, you will see that only the observer on the hash param will trigger, direct param won't be trigger. In both cases the observed value is a string which always has the same value. This is also demonstrated by uising `guidFor`.
</p>

<hr>

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

{{my-composer value=value option="baz" hashOptions=(hash foo="bar")}}

templates.components.my-composer\.hbs

{{input value=(readonly value) input=(action (mut value) value="target.value")}}

<p>option: {{@option}}</p>
<p>hashOptions.foo: {{@hashOptions.foo}}</p>

twiddle\.json

{
  "version": "0.17.0",
  "EmberENV": {
    "FEATURES": {},
    "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
    "_APPLICATION_TEMPLATE_WRAPPER": true,
    "_JQUERY_INTEGRATION": true
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.12.2",
    "ember-template-compiler": "3.12.2",
    "ember-testing": "3.12.2"
  },
  "addons": {
    "@glimmer/component": "1.0.0"
  }
}