I wanted to use Vue in my project without the whole buildup, since my project requires at least some use of Vue. I tried to toggle classes to active state, once clicked, the state does not change to active on any link. I’m still new to Vue, so any help would be appreciated.

<script src="https://unpkg.com/[email protected]"></script>



    <nav>
        <ul class="nav-item" id="toggling-classes">
            <li class="nav"><a class="nav-link" :class="{active: activeNavId === 'nav-one'}" 
                id="nav-one" @click="activeNavId = 'nav-one'" href="index.html">About</a></li>
            <li class="nav"><a class="nav-link" :class="{active: activeNavId === 'nav-two'}"
                id="nav-two" @click="activeNavId = 'nav-two'" href="academics.html">Academics</a></li>
            
            <li class="nav"><a class="nav-link" :class="{active: activeNavId === 'nav-three'}" 
                id="nav-three" @click="activeNavId = 'nav-three'" href="experiences.html"> Work Experience</a></li>
            <li class="nav"><a class="nav-link" :class="{active: activeNavId === 'nav-four'}" 
                id="nav-four" @click="activeNavId = 'nav-four'" href="interests.html"> Interests </a></li>
         
        </ul>
        <script type="text/javascript">
            Vue.createApp({
              setup() {
                let activeNavId = Vue.ref(null);
                return {
                  activeNavId,
                };
              },
            }).mount("#toggling-classes");
          </script>

    </nav>