title: Kendo UI + Vue - stable sorting groups in Chrome
body: <p>I am using the Vue wrapper for Kendo UI and can't get sorting to work in Chrome.
  I am trying to group my data into sites and order the rows by categories in those sites.
  My first column in Vue is a hidden one with the category index to sort them:</p>
  
  <pre><code>&lt;kendo-grid-column field="___categorySortingIndex" :hidden="true"&gt;&lt;/kendo-grid-column&gt;
  </code></pre>
  
  <p>If I do not enable grouping on my dataSource then it orders all the categories as expected after the index number.</p>
  
  <p>The issue I am dealing with only occurs when grouping the items:</p>
  
  <pre><code>group: {
      field: "___siteSortingIndex",
      dir: "asc"
  }
  </code></pre>
  
  <p><a href="https://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/sorting/stable-sort-chrome" rel="nofollow noreferrer">There is a tutorial on it using Kendo jQuery</a>  but the functionality does not seem to work for the vue components since vue uses template syntax instead of an array of objects like the jQuery example does.</p>
  
  <p>The jQuery tutorial solution:</p>
  
  <pre><code>...
  columns: [{
        field: "Name"
      }, {
        field: "Address",
        sortable: {
          compare: function(a, b, descending) {
            if(a.Address !== b.Address)
            {
              return a.Address - b.Address;
            }
  
            if (descending) {
              return b._position - a._position;
            } else {
              return a._position - b._position;
            }
          }
        }
      }]
  ...
  </code></pre>
  
  <p>Trying to do it in Vue:</p>
  
  <p><code>&lt;kendo-grid-colum :sortable="sortableObject" ...&gt;</code> </p>
  
  <pre><code>...
  sortableObject = {
      compare: ( a, b, descending ) =&gt; {
          ...
      }
  };
  ...
  </code></pre>
  
  <p>Setting the sortable prop to an object gives the following warning:</p>
  
  <p><strong>[Vue warn]: Invalid prop: type check failed for prop "sortable". Expected Boolean, got Object.</strong></p>
  
  <p>Is there a way to stable sort for chrome using the vue wrapper to kendo ui?</p>