In ember.js, how can I bind an attribute across 3 components?

My JS file for my-textfield looks like this:

import layout from '../templates/components/my-textfield';

export default Ember.component.extend({
  id: '',
  layout,
  tagName: ''
});

My handlebars file for my-textfield looks like this:

<div>
  
  
</div>

My JS file for my my-textfield/input looks like this:

export default Ember.TextField.extend({});

If I use my component with an ID , I get the following output:

<div>
  <input id="rawr" class="ember-text-field ember-view">
  <span class="ember-view" for="rawr"></span>
</div>

If I don't pass an ID into my component , Ember.TextField will generate its own ID.

<div>
  <input id="ember3972" class="ember-text-field ember-view">
  <span class="ember-view" for></span>
</div>

I'm trying to make it so when the ID gets generated, that the for attribute in the span will be updated with the same value.

I expected it to happen automatically since they all point to the same property on my component. But since it didn't, I've been trying to figure out how bind them all together for a while. I found out about the mut helper and tried using that like so:

<div>
  
  
</div>

but that didn't work. That just made all of my IDs in every component be the same.

What do I need to do here to make this work?