Model Html Issue

#513 Sorry for opening new issue but you have closed last one so had to create new one, I am struggling with below so if you can help to resolve or guide me at sample code that would be great, or if you have quick 5 mins and create small codepen would be good, really appreciate your help. I tried you suggested but still model is not updated on child components, it only return default values set when component render.

function createPCBoxComp(comps, defaultModel, defaultView) {

    comps.addType('pcBox', {
      // Define the Model
      model: defaultModel.extend({
        // Extend default properties
        defaults: Object.assign({}, defaultModel.prototype.defaults, {
          droppable: false,
          void: 0,
          src: '/sites/testUniTest/Images1/Environment/level3/balloons_over_turkey.png',
          hoverText: 'Link to curriculum page',
          title: ' Curriculum Link',
          a_href: 'https://team.global.test/sites/testUni',
          target: '_blank',

          traits: [{
              type: 'text',
              label: 'Hover Text',
              name: 'hoverText',
              placeholder: 'eg. Link to curriculum page',
              changeProp: 1,
            },
            {
              type: 'text',
              label: 'Title(at bottom of image)',
              name: 'title',
              placeholder: 'eg. Curriculum Link',
              changeProp: 1,
            }, {
              type: 'text',
              label: 'Link to open',
              name: 'a_href',
              placeholder: 'eg. https://team.global.test/sites/testUni',
              changeProp: 1,
            }, {
              type: 'select',
              label: 'Target',
              name: 'target',
              options: [{
                  value: '_parent',
                  name: 'This Window'
                },
                {
                  value: '_blank',
                  name: 'New Window'
                },
              ],
              changeProp: 1,
            },
            {
              type: 'text',
              label: 'Image Source',
              name: 'src',
              placeholder: 'eg. https://team.global.test/sites/LearningDevLib/test%20portal%20deliverables%20%20approved/2.%20Business%20and%20Role%20Specific/7.test%20technology/Assets_pics_graphics/t3.1_test_engineering/test_tools_training.jpg',
              changeProp: 1,
            },
          ],
        }),
        initialize(o) {
          defaultModel.prototype.initialize.apply(this, arguments);
          this.listenTo(this, 'change:target', this.updateTarget);
          this.listenTo(this, 'change:title', this.updateTitle);
          this.listenTo(this, 'change:hoverText', this.updateHoverText);
          this.listenTo(this, 'change:a_href', this.updateLink);
          this.listenTo(this, 'active', this.openModal);
          this.listenTo(this, 'dblclick active', this.openModal);
          this.listenTo(this, 'change:src', this.updateSrc);

          this.classEmpty = this.ppfx + 'plh-pc-box';
          if (this.config.modal)
            this.modal = this.config.modal;

          if (this.config.am)
            this.am = this.config.am;
        },
        updateTitle() {
          var linkModel = this.get("components").at(0);
          if (linkModel) {
            var h2Model = linkModel.get("components").at(1);
            var title = this.get('title');
            if (title)
              h2Model.content = title;
          }
        },
        updateHoverText() {
          var linkModel = this.get("components").at(0);
          if (linkModel) {
            var imageModel = linkModel.get("components").at(0);
            var hoverTextModel = imageModel.get("components").at(1);
            var hoverText = this.get('hoverText');
            if (hoverText)
              hoverTextModel.content = hoverText;
          }
        },
        updateLink() {
          var linkModel = this.get("components").at(0);
          if (linkModel) {
            var a_href = this.get('a_href');
            if (a_href)
              linkModel.href = a_href;
          }
        },
        updateTarget() {
          var linkModel = this.get("components").at(0);
          if (linkModel) {
            var target = this.get('target');
            if (target)
              linkModel.target = target;
          }
        },
        updateSrc() {
          var linkModel = this.get("components").at(0);
          if (linkModel) {
            var imageModel = linkModel.get("components").at(0);
            var imageTagModel = imageModel.get("components").at(0);
            var src = this.get('src');
            if (src)
              imageTagModel.src = src;
          }
        },
        getAttrToHTML(...args) {
          var attr = defaultModel.prototype.getAttrToHTML.apply(this, args);

          var linkModel = this.get("components").at(0);
          if (linkModel) {
            var imageModel = linkModel.get("components").at(0);
            var h2Model = linkModel.get("components").at(1);
            var imageTagModel = imageModel.get("components").at(0);
            var hoverTextModel = imageModel.get("components").at(1);

            var src = this.get('src');
            if (src)
              imageTagModel.src = src;

            var title = this.get('title');
            if (title)
              h2Model.content = title;

            var a_href = this.get('a_href');
            if (a_href)
              linkModel.href = a_href;

            var target = this.get('target');
            if (target)
              linkModel.target = target;

            var hoverText = this.get('hoverText');
            if (hoverText)
              hoverTextModel.content = hoverText;
          }

          return attr;
        }

      }, {
        isComponent(el) {
          if ((el.getAttribute &&
              el.getAttribute('data-gjs-type') == 'pcBox') || el.className === 'cust-section') {
            return {
              type: 'pcBox'
            };
          }
        }
      }),

      // Define the View
      view: defaultView.extend({

        tagName: 'div',
        events: {
          'dblclick': 'openModal',
          'click': 'openSettings',
        },

        openSettings(e) {

          var openBlocksBtn = editor.Panels.getButton('views', 'open-blocks');
          openBlocksBtn && openBlocksBtn.set('active', 0);

          var openTMBtn = editor.Panels.getButton('views', 'open-tm');
          openTMBtn && openTMBtn.set('active', 1);
        },

        initialize(o) {
          defaultView.prototype.initialize.apply(this, arguments);
          this.listenTo(this.model, 'change:target', this.updateTarget);
          this.listenTo(this.model, 'change:title', this.updateTitle);
          this.listenTo(this.model, 'change:hoverText', this.updateHoverText);
          this.listenTo(this.model, 'change:a_href', this.updateLink);
          this.listenTo(this.model, 'active', this.openModal);
          this.listenTo(this.model, 'dblclick active', this.openModal);
          this.listenTo(this.model, 'change:src', this.updateSrc);

          this.classEmpty = this.ppfx + 'plh-pc-box';
          if (this.config.modal)
            this.modal = this.config.modal;

          if (this.config.am)
            this.am = this.config.am;
        },

        updateTitle() {
          $(this.el).find('h4').html(this.model.get("title"));
        },
        updateHoverText() {
          $(this.el).find('p.img__description').html(this.model.get("hoverText"));
        },
        updateLink() {
          $(this.el).find('a').attr('href', this.model.get("a_href"));
        },
        updateTarget() {
          $(this.el).find('a').attr('target', this.model.get("target"));
        },
        updateSrc() {
          var src = this.model.get("src");
          $(this.el).find("img.img__img").attr('src', src);
          if (!src)
            $(this.el).find("img.img__img").addClass(this.classEmpty);
          else
            $(this.el).find("img.img__img").removeClass(this.classEmpty);
        },

        openModal(e) {
          var em = this.opts.config.em;
          var editor = em ? em.get('Editor') : '';

          if (editor) {
            editor.runCommand('open-assets', {
              target: this.model,
              onSelect() {
                editor.Modal.close();

                editor.AssetManager.setTarget(null);
              }
            });
          }
          this.$el.click();
        },
        disableClick() {
          this.preventDefault();
        },
        render(...args) {
          this.updateAttributes();
          this.updateClasses();
          var tempTemplate = "<div class=img__wrap><img class=img__img src=" + this.model.get("src") + "><p class=img__description>" + this.model.get("hoverText") + "</div><h4>" + this.model.get("title") + "</h4>";
          var template = "<a href=" + this.model.get("a_href") + " target=" + this.model.get("target") + " onclick='event.preventDefault()'>" + tempTemplate + "</a>"
          this.el.className = "pcBox";
          this.el.innerHTML = (template);
          return this;
        }
      })
    });
  };

now it generate below html but does not update property correctly.