Vuetify - How to highlight row on click in v-data-table

Your solution does not work because the selected property is added to the data when you click on a row, but when data is reloaded then the data without a selected property replaces the old data.

So to make it work:
- add an id field to each item in the list of desserts
- add an selectedId with default value -1 to your data
- change the line of code in method activerow to this.selectedId = item.id;
- change the class attribute in the <tr> to :class="{'primary': props.item.id===selectedId}"

If on reload only your list of desserts changes, and the new list contains an item with the same id as selected before, then the same row should become selected.

I forked the codepen example to show you how this works:
https://codepen.io/anon/pen/PrWjxQ?editors=1010

<v-data-table @click:row="rowClick" item-key="name" single-select ...

methods: {
    rowClick: function (item, row) {      
      row.select(true);
      //item.name - selected id
    }
}

<style>
  tr.v-data-table__selected {
    background: #7d92f5 !important;
  }
</style>

or

<style scoped>
  /deep/ tr.v-data-table__selected {
    background: #7d92f5 !important;
  }
</style>

Example https://codepen.io/nicolai-nikolai/pen/GRgLpNY