Using Font Awesome 5 with Bootstrap 3 Collapse Component -- change arrow icon on collapse? - vuejs2

Question

I'm trying to use Font Awesome 5 with Bootstrap 4 for an accordion/collapse section in my VUEJS SPA.
How can I get the Font Awesome arrow icon to point DOWN when a collapseable element is clicked?
Paste bin link
<template>
<div>
<div class='card-header' data-toggle='collapse' href='#collapseZero'>
<a class='card-title'>Heading Title One</a>
<font-awesome-icon :icon='faAngleUp' class='float-right'></font-awesome-icon>
</div>
<div id='collapseOne' class='card-body collapse' data-parent='#accordion'>
Content blah
</div>
</div>
</template>
<script>
import { faAngleUp, faAngleDown } from '#fortawesome/free-solid-svg-icons';
export default {
name: 'MyName'
computed: {
faAngleUp() {
return faAngleUp;
}
faAngleDOwn() {
return faAngleDown;
}
}
</script>

Answer 1

I don't know if you're looking for pure CSS approach or not, but just in case you do:
HTML
Simple accordin example. Pay attention the .collapsed class and <i class="fas"></i> on each card-header. You can change the content of the icon to display either arrow up or down based on whether card-header has the .collapsed class or not.
<div class="accordin">
<div class="card">
<div class="card-header collapsed" data-toggle="collapse"
data-target="#collapse-card-1">
Card 1
<span class="float-right">
<i class="fas"></i>
</span>
</div>
<div id="collapse-card-1" class="collapse" data-parent=".accordin">
<div class="card-body">
...
</div>
</div>
</div>
<div class="card">
<div class="card-header collapsed" data-toggle="collapse"
data-target="#collapse-card-2">
Card 2
<span class="float-right">
<i class="fas"></i>
</span>
</div>
<div id="collapse-card-2" class="collapse" data-parent=".accordin">
<div class="card-body">
...
</div>
</div>
</div>
<div class="card">
<div class="card-header collapsed" data-toggle="collapse"
data-target="#collapse-card-3">
Card 3
<span class="float-right">
<i class="fas"></i>
</span>
</div>
<div id="collapse-card-3" class="collapse" data-parent=".accordin">
<div class="card-body">
...
</div>
</div>
</div>
</div>
CSS
.card-header i.fas:before {
content: "\f107"; /* angle-down */
}
.card-header.collapsed i.fas:before {
content: "\f106"; /* angle-up */
}
Fiddle Demo
http://jsfiddle.net/davidliang2008/tgq2j0fh/