'transferTo' and 'transferAllTo' kendoListBox toolbar tools not working in vue wrapper

Question

I am trying to implement transferTo and transferAllTo ListBox toolbox tools with kendo vue wrappers.

I have tried implementing the same feature in jquery and it is working. Side by side the settings look the same but the vue wrapper version is not working. The wrapper is just a wrapper for the jquery, so I thinking it should be working. See this slackBlitz as example.

<div id="vueapp" class="vue-app">
  <h4> Made with vue wrapper</h4>
  <kendo-listbox ref="listbox1" 
        :connect-with="'listbox2'"
        :data-source="['Item1','Item2']"
        :toolbar-tools="['transferTo', 'transferFrom', 'transferAllTo', 'transferAllFrom']">
  </kendo-listbox>
  <kendo-listbox ref="listbox2"
        :connect-with="'listbox1'"
        :data-source="[]">
  </kendo-listbox>
  </br>
  <h4>Made with jquery</h4>
  <select id="listboxA"></select>
  <select id="listboxB"></select>
</div>

script

$("#listboxA").kendoListBox({
  connectWith: "listboxB",
  dataSource: [ "ItemA","ItemB"],
  toolbar: {
      tools: [ "transferTo", "transferFrom", "transferAllTo", "transferAllFrom" ]
  }
});

$("#listboxB").kendoListBox({
  connectWith: "listboxA",
  dataSource: []
});

Answer 1

Managed to fix it myself. By replacing the ref attribute with an id I was able to get it working.

<kendo-listbox id="listbox1"
    :connect-with="'listbox2'"
    :data-source="['Item1','Item2']"
    :toolbar-tools="['transferTo', 'transferFrom', 'transferAllTo', 'transferAllFrom']">
</kendo-listbox>
<kendo-listbox id="listbox2"
    :connect-with="'listbox1'"
    :data-source="[]">
</kendo-listbox>