Script not working in Vue.js routes?

Question

Vue.js

The script does not work in Vue.js routes , namely, if you hang a click event on a button or a pure link, the class is added, but not on the routes, what's wrong? tell?

<template>
    <header class="v-header header">
        <div class="container">
            <div class="header__logo">
      

            </div>
            <nav class="header__nav">
                <ul>
     
                    <li>
                        <router-link to="/">Обо мне</router-link>
                    </li>
                    <li>
                        <router-link to="/services" >Услуги</router-link>
                    </li>
                    <li>
                        <router-link to="/portfolio">Портфолио</router-link>
                    </li>
                    <li>
                        <router-link to="/feedback">Обратная связь</router-link>
                    </li>
                    <!-- <li><a href="" @click.prevent="color">Услуги2</a></li> -->
                </ul>
            </nav>
            <div class="header__burg">
                <span></span>
                <span></span>
            </div>
        </div>
        <!-- <h1 class="sithLord">I is Sith</h1> -->
    </header>
</template>

<script>
    export default {
        name: 'v-header',
 
        data() {
            return {}
        },
        methods: {
            // color() {
            //     document.querySelector(".sithLord").classList.add('red')
            //     }
        },
    }
</script>