jQueryを使用せずにテーブルの行全体をリンクにしたい

Question

Vue.jsのv-forでテーブルを実装したのですが、テーブルの行全体をリンクにしたいです。
調べ方が悪いのか、そもそも不可能なのか、jQueryを使用する方法しか分かりませんでした。

<div id="sort">
	<p>検索： <input type="text" name="query" v-model="word"></p>
	<table>
		<thead>
			<tr>
				<th v-on:click='sortBy("id")' :class="['sortable',{active: sortKey == 'id' }]" >ID<span :class="sortOrders['id'] > 0 ? 'asc' : 'desc'">▼</span></th>
				<th v-on:click='sortBy("name")' :class="['sortable',{active: sortKey == 'name' }]" >商品名<span :class="sortOrders['name'] > 0 ? 'asc' : 'desc'">▼</span></th>
				<th v-on:click='sortBy("price")' :class="['sortable',{active: sortKey == 'price' }]" >価格<span :class="sortOrders['price'] > 0 ? 'asc' : 'desc'">▼</span></th>
				～省略～
			<tr>
		</thead>
		<tbody>
			<tr v-for="item in filteredData">
				<td><a v-bind:href="item.page">{{item.id}}</a></td>
				<td><a v-bind:href="item.page">{{item.name}}</a></td>
				<td><a v-bind:href="item.page">{{item.price}}</a></td>
				～省略～
		</tbody>
	</table>
</div>

var columnsData = {
	colmuns: ['id','name','price',・・・],
	items:[
		{page:"test1",id:"1",name:"あいうえお",price:"1000円",・・・},
		{page:"test2",id:"2",name:"かきくけこ",price:"100円",・・・},
		{page:"test3",id:"3",name:"さしすせそ",price:"500円",・・・},
		{page:"test4",id:"4",name:"たちつてと",price:"5000円",・・・},
		～省略～
	],
	sortOrders : function(){
		var sortOrder = {};
		columnsData["colmuns"].forEach(function (key) {
			sortOrder[key] = 1
		})
		return sortOrder;
	}
};
new Vue({
	el: '#sort',
	data: {
		colmuns: columnsData.colmuns,
		items:columnsData.items,
		sortKey : "",
		sortOrders : columnsData.sortOrders(),
		word: ""
  },
	computed: {
		filteredData: function(){
			var data = this.items;
			var sortKey = this.sortKey;
			var wordKey = this.word && this.word.toLowerCase();
			var order = this.sortOrders[sortKey] || 1;
			if (wordKey) {
				data = data.filter(function (row) {
					return Object.keys(row).some(function (key) {
						return String(row[key]).toLowerCase().indexOf(wordKey) > -1
					})
				})
			}
			if (sortKey) {
				data = data.slice().sort(function (a, b) {
					a = a[sortKey]
					b = b[sortKey]
					return (a === b ? 0 : a > b ? 1 : -1) * order
				})
			}
			return data;
		}
	},
	methods: {
		sortBy: function (key) {
			this.sortKey = key;
			this.sortOrders[key] = this.sortOrders[key] * -1;
		}
	}
});

実際にはデータ量はもっとありますが現在のコードです。
（参考にしたサイト様があったのですが、色々調べすぎてどこだか分からなくなってしまいました。）
行全体リンクの方法がわからず、全てのセルにv-bind:href="item.page"を付けている状態です。
jQueryのdata-hrefのようなやり方で行リンクはできないでしょうか？

Answer 1

jQueryは元々JavaScriptで書かれているので、jQueryで出来ることはJavaScriptで出来ます。
data-hrefと言ってもdata属性取得してlocationで遷移させるだけなはずなので、同じようにクリックイベントでJavaScriptでdata属性を取得して利用すればできそうに思います。