Sortablejs question

Source code: Survey setup
Survey.defaultBootstrapCss.navigationButton = "btn btn-primary";
Survey.Survey.cssType = "bootstrap";
Survey.JsonObject.metaData.addProperty("checkbox", {name: "renderAs", default: "standard", choices: ["standard", "sortablejs"]});

var survey = new Survey.Model({ questions: [
    { type: "checkbox", name: "lifepriopity", renderAs: "sortablejs", title: "Life Priorities ", isRequired: true, colCount: 0,
        choices: ["family", "work", "pets", "travels", "games"] }
]});


var widget = {
    name: "sortablejs",
    isFit : function(question) { return question["renderAs"] === 'sortablejs'; }
}

Vue.component(widget.name, {
    props: ['question', 'css', 'isEditMode'],
    template:`
  <div style="width:50%">
    <div style="border-style:solid;border-width:1px;border-color:#1ab394;width:100%; min-height:50px;">
      <span>move items here</span>
    </div>
    <div style="border-style:solid;border-width:1px;border-color:#1ab394;width:100%; min-height:50px; margin-top:10px;">
      <div v-for="(item, index) in question.visibleChoices" :data-value="item.value">
        <div style="background-color:#1ab394;color:#fff;margin:5px;padding:10px;">{{ item.text}}</div>
      </div>
    </div>
  </div>
`,
    mounted: function () {
      var vm = this;
      var resultContainer = vm.$el.querySelector("div:first-child");
      var emptyText = resultContainer.querySelector("span");
      var sourceContainer = vm.$el.querySelector("div:last-child");
      Sortable.create(resultContainer, {
          animation: 150,
          group: {
        		name: 'top3',
        		pull: true,
        		put: true
          },
        	onSort: function (evt) {
        	  var result = [];
        	  if (evt.to.children.length === 1) {
        	      emptyText.style.display = "inline-block";
        	  } else {
        	      emptyText.style.display = "none";
            	  for (var i = 1; i < evt.to.children.length; i++) {
            	      result.push(evt.to.children[i].dataset.value)
            	  }
        	  }
        		vm.question.value = result;
        	},
      });
      Sortable.create(sourceContainer, {
          animation: 150,
          group: {
        		name: 'top3',
        		pull: true,
        		put: true
          }
      });
    }
})
Survey.CustomWidgetCollection.Instance.addCustomWidget(widget);
new Vue({ el: '#surveyElement', data: { survey: survey } });