value in href with computed property is not dynamic - vue.js

Question

Basically, I want a dynamic link on my a href based on the code. Where I want my link to be to example2.com when the website using my NuxtJS code is example1.com.. However, it will always get linked to / instead of example2.com.. It is really weird as it can clearly be seen in Vue Inspection Tool and in {{ backHref }} that it is already returning example2.com.. However it does not reflect in :href
/* eslint-disable vue/no-v-html */
<template>
<div class="h-100 bg-ededed">
<a :href="backHref">{{ backHref }}</a>
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
meta: { noFooter: true },
computed: {
...mapState({
chatRooms: (state) => state.chat.chatRooms
}),
backHref() {
let link
if (this.chatRooms.length === 1) {
console.log(`this.isExample: ${this.isExample}`)
if (this.isExample) {
console.log('went here 1')
link = 'https://example2.com'
} else {
console.log('went here 2')
link = '/'
}
} else {
link = '/chat/'
}
console.log(
`this.addChannelCodeLink(link): ${this.addChannelCodeLink(link)}`
)
return this.addChannelCodeLink(link)
},
getDomain() {
let host
if (process.client && window) {
host = window.location.host
}
return host
},
isExample() {
return this.getDomain ? this.getDomain.includes('example1.com') : false
}
},
methods: {
addChannelCodeLink(link) {
if (this.$route.query.r) {
link += `?r=${this.$route.query.r}`
}
return link
}
}
}
</script>
<style lang="scss" scoped></style>
Console.log will be something like this:
- While in SSR
this.isExample: false
went here 2
this.addChannelCodeLink(link): /
- In Client
this.isExample: true
went here 1
this.addChannelCodeLink(link): http://example2.com