vur-router + css issue?

Question

Vue.js

I have 2 links
and to go to another page you have to click as shown in the photo, how can I fix this? but I realized that the problem is in prevent, but if you do not use it, then css does not work
CODE

<template>
  <div>
    <div class="body">
      <app__header class="header"/>

      <div class="wrapper">
        
        <ol class="tabs__list">
          <router-link to="/list" >
            <ul class="link tabs__link" :class="{active: activeLink === 1}" > 
                <p id='item1' @click.prevent="activeLink = 1" > New </p>
            </ul>
          </router-link>

          <ul class="link tabs__link" :class="{active: activeLink === 2}" > 
            <p id='item1' @click.prevent="activeLink = 2" > Popular </p>
          </ul>
        </ol>

      </div>
    </div>

    <router-view/>
  </div>
</template>

<script>
  import app__header from '../src/components/components/Header'

  export default {

    components: { app__header, },

    data () {
      return {
        activeLink: undefined
      }
    }
  }
</script>

<style scoped>
  .tabs__list {
    border-bottom: 2px solid #E4E7ED;  
    width: 100%;
  } 

  .tabs__link {
    position: relative;
    background-color: transparent;
    border: none;
  }

  .active {
    color: #ED5992;
  }

  .active::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    display: block;
    width: 100%;
    height: 3px;
    background-color: #ED5992;
  }

  ol {
    display: flex;
    align-items: flex-start;
  }

  .body {
    display: flex;
    margin-top: 30px;
    margin-left: 25px;
  }

  .header {
    display: flex;
  }

  .wrapper {
    width: 100%;
    margin-left: 180px;
    display: flex;
  }

  .link {
    font-family: DRAB;
    font-size: 18px;
    margin-right: 50px;
    height: 30px;
  }
</style>