Vue Accordion: Override SCSS value - vue.js

Question

I'm using this accordion on my vue project: https://github.com/tkhquang/vue-simple-accordion#html-structure
I'm having trouble overriding the style on the button. The class name is "vsa-item__trigger" but I can't figure out a way to attach my style to it. The scss is in a style tag within my component. This is what my code looks like now:
<vsa-list>
<vsa-item v-for="item in listOfItems" :key="item.id">
<vsa-heading>
<label for="acc1 acc-label"> {{ item.heading }} </label>
</vsa-heading>
<vsa-content>
<ul class="mobile-ul-accordian">
<li class="mobile-li-accordian">
<a :href="item.url">{{ item.content }}</a>
</li>
</ul>
</vsa-content>
</vsa-item>
</vsa-list>
button.vsa-item__trigger[type="button"][aria-expanded="false"] [data-vsa-list="14"] [data-vsa-item="15"] [data-vsa-active="false"] [aria-controls="vsa-panel-15"]{
border: none !important;
}

Answer 1

I just simplyfied your selector and this worked for me. Also on JSFiddle.
<button
class="vsa-item__trigger"
type="button"
aria-expanded="true"
aria-controls="vsa-panel-{item_id}"
{data_attrs}
>
<span
class="vsa-item__trigger__content"
{data_attrs}
>
This is the heading
</span>
<span
class="vsa-item__trigger__icon vsa-item__trigger__icon--is-active"
{data_attrs}
>
</span>
</button>
button.vsa-item__trigger {
border: none !important;
}