我有以下的.hbs

<button {{action "addToObject"}}>
    Add to Object
</button>

<br />

{{#each this.sortedDictionary as |item|}}
    {{item.name}}<br />
{{/each}}

以及对应的.js代码：

import Component from '@ember/component';
import EmberObject, {set, computed, observer} from '@ember/object';

export default Component.extend(
{
    myDictionary: null,
    counter: 0,

    init()
    {
        this._super( ...arguments );

        console.log( "test-comp init" );

        this.myDictionary = {};

        set( this.myDictionary, "hello", "42" );
    },

    sortedDictionary: computed( 'myDictionary', function()
    {
        let sortedDictionary = [];

        if ( this.myDictionary ) 
        {
            const keys = Object.keys( this.myDictionary );

            keys.sort();

            console.log( "test-comp keys", keys );

            sortedDictionary = keys.reduce( ( sorted, itemName ) => 
            {
                const value = 
                {
                    name: itemName,
                    ...this.myDictionary[ itemName ]
                }

                sorted.push( value );

                return sorted;
            }, []);
        }

        console.log( "test-comp sortedDictionary", sortedDictionary );

        return sortedDictionary;
    }),

    actions:
    {
        addToObject()
        {
            set( this.myDictionary, `hello${this.counter}`, "42" );

            this.counter++;

            console.log( "test-comp addToObject", this.myDictionary );
        }
    }
});

在我看来，当我按下添加到对象按钮时，我的.hbs应该重新呈现。但事实并非如此。
我假设这是因为sortedDictionary未重新计算，无法检测到myDictionary*已更改。
这个问题的正确解决方案是什么？