title: Setting the Vue Component for a BlockGroup
body: <p>I'm trying to build a custom component in Piranha called Table. It consists of a BlockGroup called TableBlock, which contains a BlockGroup called TableRowBlock, which itself contains a list of fields of type TableCellField.</p>
  <p>I've never embedded a BlockGroup inside a BlockGroup before and not sure if it's possible, but I hope it is.
  A BlockGroup by default is rendered by the block-group (or block-group-horizontal?) Vue component in the admin, but I want to render it with my own custom Vue component.</p>
  <p>It seems like even though I set the Component property on the BlockGroup, it ignores it and it still defaults to one of the default components for a BlockGroup, such as block-group or block-group-horizontal.</p>
  <p>Is there any way to accomplish what I'm trying to do?</p>
  <pre><code>namespace Piranha.Extend.Blocks
  {
      [BlockGroupType(Name = &quot;Table&quot;, Category = &quot;Content&quot;, Icon = &quot;fas fa-images&quot;, Component = &quot;table-block&quot;)]
      [BlockItemType(Type = typeof(TableRowBlock))]
      public class TableBlock : BlockGroup
      {
      }
  
      [BlockGroupType(Name = &quot;Table Row&quot;, Category = &quot;Content&quot;, Icon = &quot;fas fa-images&quot;, Component = &quot;table-row-block&quot;)]
      [BlockItemType(Type = typeof(TableCellField))]
      public class TableRowBlock : BlockGroup
      {
          public int RowNumber { get; set; }
  
          public override string GetTitle()
          {
              return &quot;Row&quot;;
          }
      }
  }
  
  namespace Piranha.Extend.Fields
  {
      [FieldType(Name = &quot;TableCell&quot;, Shorthand = &quot;Text&quot;, Component = &quot;table-cell-field&quot;)]
      public class TableCellField : IField
      {
          public string Value { get; set; }
          public int ColumnNumber { get; set; }
  
          public string GetTitle()
          {
              return !string.IsNullOrEmpty(ColumnNumber.ToString()) ? ColumnNumber.ToString() : &quot;&quot;;
          }
      }
  }
  </code></pre>
  <p>Here's the &quot;table-block&quot; Vue component:</p>
  <pre><code>&lt;template&gt;
      &lt;div :id=&quot;uid&quot; class=&quot;block-group&quot;&gt;
          &lt;table&gt;
              &lt;template v-for=&quot;child in model.items&quot;&gt;
                  &lt;component v-bind:is=&quot;child.meta.component&quot; v-bind:uid=&quot;child.meta.uid&quot; v-bind:toolbar=&quot;toolbar&quot; v-bind:model=&quot;child.model&quot;&gt;&lt;/component&gt;
              &lt;/template&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
          props: [&quot;uid&quot;, &quot;toolbar&quot;, &quot;model&quot;],
          methods: {
  
          },
          mounted: function () {
              
          }
      }
  &lt;/script&gt;
  </code></pre>
  <p>Here's the &quot;table-row-block&quot; Vue component:</p>
  <pre><code>&lt;template&gt;
      &lt;tr :id=&quot;uid&quot; class=&quot;block-group&quot;&gt;
          &lt;template v-for=&quot;child in model.items&quot;&gt;
              &lt;component v-bind:is=&quot;child.meta.component&quot; v-bind:uid=&quot;child.meta.uid&quot; v-bind:toolbar=&quot;toolbar&quot; v-bind:model=&quot;child.model&quot; v-on:update-title=&quot;updateTitle($event)&quot;&gt;&lt;/component&gt;
          &lt;/template&gt;
      &lt;/tr&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
      props: [&quot;uid&quot;, &quot;toolbar&quot;, &quot;model&quot;],
      methods: {
  
      },
      mounted: function () {
          var self = this;
      }
  }
  &lt;/script&gt;
  </code></pre>
  <p>Here's the &quot;table-cell-field&quot; Vue component:</p>
  <pre><code>&lt;template&gt;
      &lt;td :id=&quot;uid&quot;&gt;
          &lt;input class=&quot;form-control&quot; :placeholder=&quot;meta.placeholder&quot; v-model=&quot;model.value&quot; v-on:change=&quot;update()&quot; type=&quot;text&quot; /&gt;
          &lt;input class=&quot;form-control&quot; v-model=&quot;model.columnNumber&quot; type=&quot;hidden&quot; /&gt;
      &lt;/td&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
          props: [&quot;uid&quot;, &quot;model&quot;, &quot;meta&quot;],
          methods: {
              update: function () {
                  
              }
          }
      }
  &lt;/script&gt;
  </code></pre>
  <p>Here's the error I'm getting:
  <a href="https://i.stack.imgur.com/0H9xh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0H9xh.png" alt="enter image description here" /></a></p>