vue.js elment ui タブを利用した際の ブラウザの戻る進む

vue.js で element ui を利用した際、
ブラウザの戻る進むでタブを動作させたい。

① タブをクリックするとタブが切り替わる
② ① の後に戻るを押すとタブが戻る

top.vue

<template>

    <div>

        <div class="top-tabs"  style="margin:auto;">

            <el-tabs v-model="selectedTab" :stretch="true"  @tab-click="tabSelect">
                <el-tab-pane label="最新" name="1"></el-tab-pane>
                <el-tab-pane label="人気" name="2"></el-tab-pane>
                <el-tab-pane label="いいね（自分がいいねしたの）" name="3" ></el-tab-pane>
            </el-tabs>

        </div>

        <div>
            現在選択されているタブ {{this.selectedTab}}<br>
            クエリ : {{this.$route.query.tab}}
        </div>

    </div>
    
</template>

<script>
    
    export default {

        data () {
            return {
                defaultSelectedTab:"2",//初期選択値
                selectedTab:"",//選択値
            };
        },
        
        created () {
            this.selectedTab = this.defaultSelectedTab;
        },

        methods: {
            tabSelect(obj,e){
                var idou = location.pathname + "?tab=" + obj.name;
                this.$router.push({
                    path: idou
                }, () => {}, () => {});
            }

        },
        
        watch: {
            '$route.query': {
                immediate: true,//即時
                handler(newVal) {
                    console.log("タブクエリをウォッチ");

                    if(!newVal.tab){
                        newVal.tab = this.defaultSelectedTab;
                    }

                    this.selectedTab = newVal.tab;
                }
            }

        },
        
    }
</script>

こんな感じでどうでしょうか。