Table will not be updated with dynamical columns

[sknightq]

My columns are the date, which is depended on the user's time select. Such as 2018-08-01, 2018-08-02，2018-08-03 and so on. So my column slot like following:

<v2-table>
  <v2-table-column v-for="(column,index) in columns" :key="index" :label="column.label" :width="column.width" :prop="column.key"></v2-table-column>
</v2-table>

when columns are updated, table will not be updated

[dwqs]

do you have a reproduce demo

[sknightq]

@dwqs I had got my aim with my custom code. Because the component instance of columns'slots can't be got in updateColumnsWidth function, which results in the wrong width of the table when columns' slot updated. Your code only call the updateColumnsWidth in mounted hook.
So I recall the handleWinResize in updated hook with this.$nextTick method. Of course, I add some computed attributes in child component "table-body.js"

some code snippets:

// table.vue
// to update the columns width
        updated () {
            this.$nextTick(function () {
                this.handleWinResize();
                if (this.rowsChange) {
                    this.updateScrollbar(true);
                    this.rowsChange = false;
                }        
            });
        }

// table.vue
// detect neccessary resize
            handleWinResize () {
                const newColumns = this.$slots.default.filter(function (column) {
                    return column.componentInstance && column.componentInstance.$options.name === 'v2-table-column';
                }).map(function (column) {
                    return column.componentInstance;
                });

                if (this.$el.clientWidth === this.containerWidth && this.columns.length === newColumns.length) {
                    return;
                } else {
                    this.bodyMinWidth = undefined;
                }

                this.containerWidth = this.$el.clientWidth;
                this.containerHeight = this.$el.clientHeight;
                
                // this.columns = [].concat(this.updateColumnsWidth(this.columns));
                this.columns = [].concat(this.updateColumnsWidth());

                if (this.rightColumns.length) {
                    this.rightColumns = [].concat(this.getColumnComponentsByType(this.columns, 'right'));
                }
                if (this.leftColumns.length) {
                    this.leftColumns = [].concat(this.getColumnComponentsByType(this.columns, 'left'));
                }

                if (this.scrollbar) {
                    this.updateScrollbar(true);
                }
            }