Vue.js公式サンプルのグリッドコンポーネントで、行にマウスオーバーイベントを設定する

Vue.jsでマウスオーバーイベントをハンドリングする方法について質問です。

やりたいこと
グリッドコンポーネントのサンプルプログラムで、
行にマウスオーバーすると行の色が変化する。
https://jp.vuejs.org/examples/grid-component.html

やったこと
https://jsfiddle.net/m7sgaron/425/
html側のtr要素に@mouseoverイベントを追加しましたが、
javascript側でevent.targetのプロパティを見てもtdが返ってきます。
当然tdのスタイルを変更してもマスの色しか変わりません。
行全体の色を変更するにはどうしたらいいでしょうか？

HTML側

   <tr v-for="
    entry in data
    | filterBy filterKey
    | orderBy sortKey sortOrders[sortKey]" @mouseover="mouseover">

js側

mouseover: function(event) {
  alert(event.target);
  alert(event.target.textContent);
}

よろしくお願いします。