это не js-селекторы, а css-селекторы, поэтому - да, будет работать как предполагается.
почитайте документацию к querySelector

https://developer.mozilla.org/en-US/docs/Learn/HTML
https://developer.mozilla.org/en-US/docs/Learn/CSS
https://www.w3schools.com/css/default.asp
https://www.w3schools.com/html/default.asp

а также
https://doka.guide/css/
https://www.google.com/search?q=css
https://web.dev/learn/css/

https://csstricks.com
https://garden.bradwoods.io
https://www.smashingmagazine.com/category/css/

И, конечно, DevTools любого браузера.

.container {
border-bottom:  2px solid grey;
}
.container a.active {
border-bottom: 2px solid lightgreen
}

<div class="container">
  <a class="active">ссылка</a>
  <a>ссылка</a>
  <a>ссылка</a>
  <a>ссылка</a>
</div>

для этого есть реактивность.

<template>
  <child-component v-bind="globalObject"/>
</template>

<script setup>
// import { Alien, DevTools, Test, ChildComponent } from 'where?'
import { reactive } from 'vue'

const globalObject = reactive({prop1, prop2, prop3})
</script>

а вообще читайте документацию. https://vuejs.org/guide/components/props.html - для новичков там исчерпывающе

а вы искать пробовали?
https://varnote.ru/posts/other/nvm-with-webstorm-o...