How to set initial sort in Polymer vaadin-grid

I’m having trouble setting an initial sort in the polymer vaadin-grid element. I have the following column defined:

<vaadin-grid-column>
  <template class="header">
    <vaadin-grid-sorter path="sn" direction="asc">
      <div><b>SN</b></div>
      <vaadin-grid-filter aria-label="SN" path="sn" value="[[_filterSn]
]">
        <input placeholder="Filter" value="{{_filterSn::input}}" focus-target>
      </vaadin-grid-filter>
    </vaadin-grid-sorter>
  </template>
  <template>[[item.sn]
]</template>
</vaadin-grid-column>

My thought was that the direction=“asc” attribute on the grid-sorter would cause the table to sort on the column by default. However, it has no effect and isn’t even on the element in the DOM when loaded in Chrome. However manually adding the same attribute in Chrome’s inspector does sort the column.

Hi! Do you have a jsfiddle where this can be reproduced, that would help a lot. I was checking out Expense manager source code and with it looks that you can use it with path and direction. Make sure you remember to import vaadin-grid-sorter.html file.
https://github.com/vaadin/expense-manager-demo/blob/master/src/expenses-list.html#L177