Re-render Component on Canvas when tagName has changed

I'm trying to build a basic Header component that lets you select H1 to H6 with a trait. But when an option is selected, the canvas doesn't update. The change is visible in the code view, and if I move the element in the canvas with the drag tool, the tag then changes. I have been reading the API docs as well as the source, but I can't make the component automatically re-render. I suspect that Grapes is not listening for a change of the component tag name. What is the appropriate way to force a re-render in this case?

var comps = editor.DomComponents;
var blocks = editor.BlockManager;
var textType = comps.getType('text');
var textModel = textType.model;
var textView = textType.view;

comps.addType('header', {
  model: textModel.extend({
    defaults: Object.assign({}, textModel.prototype.defaults, {
      'custom-name': 'Header',
      tagName: 'h1',
      traits: [
        {
          type: 'select',
          options: [
            {value: 'h1', name: 'One (largest)'},
            {value: 'h2', name: 'Two '},
            {value: 'h3', name: 'Three '},
            {value: 'h4', name: 'Four '},
            {value: 'h5', name: 'Five '},
            {value: 'h6', name: 'Six (smallest)'},
          ],
          label: 'Size',
          name: 'header-size',
          changeProp: 1
        }
      ]
    }),

    init() {
      this.listenTo(this, 'change:header-size', this.changeTagName);
    },

    changeTagName() {
      // view.tagName is a fn that returns model.tagName
      this.set('tagName', this.get('header-size'));
    }

  }, {
    isComponent: function(el) {
      if(el && ['H1','H2','H3','H4','H5','H6'].includes(el.tagName)) {
        return {type: 'header'};
      }
    }
  }),
  view: textView
});

blocks.add('header', {
  label: 'Header',
  category: 'Basic',
  attributes: {class:'fa fa-header'},
  content: {
    type:'header',
    content:'Insert your header text here',
    activeOnRender: 1
  }
});