Ember.Component.set doesn't update template

I have a component which displays a value from a object. This object gets loaded with Ember.$.ajax into strings

Because strings is loaded asynchronously and/or can change at runtime (not in this example), I use .done() to get the value I need.

A simple template does work

{{u-string name="test_value"}}

But if nest {{u-string}} with an component which {{yield}}s, it won't update the template.

 {{#u-button}}
     {{u-string name="test_btn"}}
 {{/u-button}}

Here is my simplified component code:

import Ember from 'ember';

var strings = Ember.$.ajax({
        url: '/api/strings'
    });

export default Ember.Component.extend({
    tagName: 'span',
    value: '?',
    count: null,

    willInsertElement: function() {
        console.log("Strings wait for \"" + this.get('name') + "\"");
        strings.done((value) => {
            Ember.run(() => { 
                var s = value[this.get('name')] || this.get('name');
                console.log("Strings got \"" + s + "\" for \"" + this.get('name') + "\"");
                this.set('value', s);
            });
        }); 
    }
});

Here is my {{u-string}} template:

{{value}}

If I transitionTo it will display the text correctly, but when I visit the page directly (or refresh) it will not. Based on the console.log and debugging, the value gets set correctly but the template doesn't update.

Am I doing something fundamentally wrong or should this work ? Is it even possible to use this later (via an async callback) ? If not how would I update my components value ?