How to sync component with ED

components.profile-pic-img.js

import Ember from 'ember';

export default Ember.Component.extend({
  cStore: Ember.inject.service('store'),
  profileData: null,
	
  myPic: Ember.computed.readOnly('profileData.profilePic'),
  
  init(){
    this._super(...arguments);
    
		let dataStore = this.get('cStore');
    let this_self = this;
  
    dataStore.findRecord('my-profile', 0).then(function(dataObj) {
 		 this_self.set('profileData', dataObj);
		}); 
  } // init
});

components.update-profile-pic.js

import Ember from 'ember';

export default Ember.Component.extend({
  cStore: Ember.inject.service('store'),
	profileData: null,
  
	imgPic: Ember.computed.readOnly('profileData.profilePic'),
  
  didInsertElement(){
    var this_self = this;
    
    this.get('cStore').findRecord('my-profile', 0).then(function(dataObj) {
        this_self.set('profileData', dataObj);
			});
  },
  
  actions:{
  	updateImgToBird(){
      
      var this_self = this;
      
    	var birdImg = "https://news.nationalgeographic.com/content/dam/news/2017/10/03/bird-hurricane/01-bird-hurricane-Kirtland%27s-Warbler_USFWS_U.ngsversion.1507003290735.adapt.1900.1.jpg";
      
      let dataStore=this.get('cStore');
      
      dataStore.findRecord('my-profile', 0).then(function(dataObj) {
				dataObj.set('profilePic', birdImg);
			});
      
    }
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  
  init(){
    
    this._super(...arguments);
    var hamsterPic = "http://static.wixstatic.com/media/c7aa4ede3378f0cec372a83b2bf88204.jpg/v1/fill/w_784,h_642,al_c,q_90,usm_0.66_1.00_0.01/c7aa4ede3378f0cec372a83b2bf88204.webp"
    
    var newDataRecord = this.get('store').createRecord('my-profile', {
      id: 0,
      profilePic: hamsterPic
    }); 
  }
});

models.my-profile.js

import Model from "ember-data/model";
import attr from "ember-data/attr";
import { belongsTo, hasMany } from "ember-data/relationships";

export default Model.extend({
  profilePic: String
});

templates.application.hbs

{{profile-pic-img}}

<br><br>

{{update-profile-pic}}

templates.components.profile-pic-img.hbs

My Image in header component: <img src={{myPic}} width=100>

templates.components.update-profile-pic.hbs

Update component:
<button {{action "updateImgToBird"}}> Update To Bird </button>
<img src={{imgPic}} width=50>

tests.helpers.destroy-app.js

import Ember from 'ember';

export default function destroyApp(application) {
  Ember.run(application, 'destroy');
}

tests.helpers.resolver.js

import Resolver from '../../resolver';
import config from '../../config/environment';

const resolver = Resolver.create();

resolver.namespace = {
  modulePrefix: config.modulePrefix,
  podModulePrefix: config.podModulePrefix
};

export default resolver;

tests.helpers.start-app.js

import Ember from 'ember';
import Application from '../../app';
import config from '../../config/environment';

const { run } = Ember;
const assign = Ember.assign || Ember.merge;

export default function startApp(attrs) {
  let application;

  let attributes = assign({rootElement: "#test-root"}, config.APP);
  attributes = assign(attributes, attrs); // use defaults, but you can override;

  run(() => {
    application = Application.create(attributes);
    application.setupForTesting();
    application.injectTestHelpers();
  });

  return application;
}

tests.test-helper.js

import resolver from './helpers/resolver';
import {
  setResolver
} from 'ember-qunit';

setResolver(resolver);

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "2.12.1"
  }
}