I am trying to bind a combobox to a dynamic array defined on Vue instance. The values on the array are not known until the control is databound. I can't seem to figure why change to the array won't refresh the combo. Here's the code snippet. Does current version pf kendo-vue support this behavior?

//javascript

var that = this;

that.$set(that, 'countryArray', [{text: 'canada', value:'2' }]);

//html

<kendo-combobox v-model="countrySel"
:placeholder="'Select country...'"
:data-source="countryArray"
:data-text-field="'text'"
:data-value-field="'value'"
:filter="'contains'"
>
</kendo-combobox>

hey, i'm ecaluating the pivot grid using the trial version. i seem to have problems getting angularjs and the pivot templates to work together.

my script imports in the index are as follows: 

  <script src="bower_components/jquery/jquery.js"></script>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/kendo-ui/js/kendo.all.min.js"></script>

in the HTML page i have: 

    <div class="col-md-12" ng-if="vm.data.HeatChartSkillsPerResource && vm.data.HeatChartSkillsPerResource.length > 0">
        <kendo-pivot-grid  k-data-source="vm.dataSource" k-options="vm.options" id="pivotgrid" class="hidden-on-narrow">
            <div k-column-header-template>
                {{member.caption}}
            </div>
        </kendo-pivot-grid>

in the relevant controller: 

    vm.dataSource = new kendo.data.PivotDataSource({
                    data: vm.gridOptions.data,
                    schema: {
                        model: {
                            fields: {
                                FullName: {
                                    type: 'string'
                                },
                                skill_rating: {
                                    type: 'number'
                                },
                                skill_name: {
                                    field: 'Skill.SkillName'
                                },
                                Category: {
                                    field: 'Skill.Category'
                                }
                            }
                        },
                        cube: {
                            dimensions: {
                                FullName: {
                                    caption: 'Resources'
                                },
                                Category: {
                                    caption: 'Categories'
                                },
                                skill_name: {
                                    caption: 'Skills'
                                }
                            },
                            measures: {
                                'Average': {
                                    field: 'skill_rating', aggregate: 'average'
                                }
                            }
                        }
                    },
                    columns: [{ name: 'FullName', expand: true }],
                    rows: [{ name: 'Category', expand: true }, { name: 'skill_name', expand: true }],
                    measures: ['Average']
                });

        vm.options = {
            columnWidth: 100,
            height: 500,
            filterable: true,
            sortable: true,
            reorderable: false
        }

the data is loaded as expected but column header templates (or any other templates) don't recognize angularjs. what i see is {{member.caption}} inside the headers. (as in the attached file).

i don't see any errors.

any help on that?

Is it possible to data-bind the visible property in MVVM to multiple conditions, either by using logical operators (&&) or calling a function that accepts parameters?

or