TagBox Custom Widget

Source code: Survey setup
Survey.defaultBootstrapCss.navigationButton = "btn btn-primary";
Survey.Survey.cssType = "bootstrap";
var survey = new Survey.Model({
    pages: [
        { name:"page1", questions: [
            { type: "checkbox", isRequired:true, choicesByUrl: { url: "https://restcountries.eu/rest/v1/all" }, name: "countries", title: "Please select all countries you have been for the last 3 years." }
        ]}
    ]
});


var widget = {
    name: "tagbox",
    isFit : function(question) { return question.name == 'countries'; }
}

Vue.component(widget.name, {
    props: ['question', 'css', 'isEditMode'],
    template: '<div></div>',
    mounted: function () {
        var vm = this
        var widget = $(vm.$el).dxTagBox({
            items: vm.question.visibleChoices,
            value: vm.question.value,
            searchEnabled: true,
            displayExpr: "text",
            valueExpr: "value",
            onValueChanged: function (e) {
                vm.question.value = e.value;
            }
        }).dxTagBox("instance");
        //It requires when choices fills on ajax callback, using choicesByUrl property.
        vm.question.choicesChangedCallback = function() {
            widget.option("items", vm.question.visibleChoices);
        }
        vm.question.valueChangedCallback = function() {
            widget.option("value", vm.question.value);
        }
    },
    destroyed: function () {
        $(this.$el).off().remove();
    }
})
Survey.CustomWidgetCollection.Instance.addCustomWidget(widget);
new Vue({ el: '#surveyElement', data: { survey: survey } });