How to set a conditional valueTemplate for a Multi Select with Checkbox Mode

<template>
    <div :class="cssStyle">
        <ejs-multiselect :placeholder="placeholder"
                         :mode="mode"
                         :dataSource="dataSource"
                         :showSelectAll='showSelectAll'
                         :showDropDownIcon="true"
                         :enableSelectionOrder='true'
                         :selectAllText="selectAllText"
                         :unSelectAllText="unSelectAllText"
                         :allowFiltering="allowFiltering"
                         :filterBarPlaceholder="filterBarPlaceholder"
                         :valueTemplate="valueTemplate"
                         :fields="fields"
                         :closePopupOnSelect="false"
                         @selectedAll="selectedAll"
        >ejs-multiselect>
    div>
template>

<script>
    import Vue from 'vue';
    var valueVue = Vue.component("valueTemplate", {
        template: `<span>{{data.ID}} - {{data.Name}}span>`,
        data() {
            return {
                data: {}
            };
        }
    });

    export default {
        props: {
            id: {
                type: String,
                required: false,
                default: 'multiselect'
            },
            placeholder: {
                type: String,
                required: false,
                default: 'Select'
            },
            mode: {
                type: String,
                required: false,
                default: 'CheckBox',
                validator: function (value) {
                    return ['Box', 'Delimiter', 'CheckBox'].includes(value);
                }
            },
            dataSource: {
                type: Array,
                required: false,
                default: [],
            },
            showSelectAll: {
                type: Boolean,
                required: false,
                default: true,
            },
            selectAllText: {
                type: String,
                required: false,
                default: 'Select All'
            },
            unSelectAllText: {
                type: String,
                required: false,
                default: 'Unselect All'
            },
            allowFiltering: {
                type: Boolean,
                required: false,
                default: true
            },
            filterBarPlaceholder: {
                type: String,
                required: false,
                default: 'Search ...'
            },
            fields: {
                type: Object,
                required: false,
                default: function () {
                    return {text: null, value: null, iconCss: null, groupBy: null};
                }
            },
            values: {
                type: [Array, Boolean],
            },
            cssStyle: {
                type: [Object, String]
            }
        },
        data() {
            return {
                valueTemplate : function(e) {
                    return {
                        template: valueVue
                    }
                },
            }
        }
    }
script>

select: function(e){
    let selectedItemLength = this.popupWrapper.querySelectorAll('li.' + 'e-list-item.e-active').length;
    if ((this.dataSource.length - 1) == selectedItemLength) {
        setTimeout(() => {
            this.viewWrapper.innerText = 'All Countries Selected';
        }, 20);
    }
},