Why is my computed method running both server and client side? - vue.js

Question

I'm making a Universal Application with Nuxt and Vue.js and I noticed that my button was having some weird behaviour, it changed class after the page was loaded, and since it has a transition it became quite annoying.
I set the class of the button with a computed method. So I tried putting a console.log in the computed method, and then I saw that it called both server-side and client-side? How is this possible? Is there anything that I need to do so that the method will only be called server-side?
<template>
<a :href="link" :class="themeClass">
<slot />
</a>
</template>
<script>
export default {
props: {
link:{
type:String,
default: '',
},
theme:
{
type:String,
default: 'primary',
validator: (value) => ['secondary', 'tertiary'].includes(value),
},
inverted:{
type:Boolean,
default: false,
},
},
computed:{
themeClass: function()
{
console.log("set style");
let invertedStyle = this.inverted ? '-inverted' : '';
return 'butt ' + this.theme + invertedStyle;
}
}
}
</script>
<style lang="scss" scoped>
.butt{
box-sizing: border-box;
cursor: pointer;
display: block;
text-align: center;
width: 170px;
height: 40px;
line-height: 40px;
transition: 0.2s;
}
.primary{
border: 2px solid $transparant;
background-color: $primary-color;
color: $tertiary-color;
}
.primary:hover{
border: 2px solid $primary-color;
#include alphaBackground();
}
.primary-inverted{
border: 2px solid $primary-color;
color: $primary-color;
#include alphaBackground();
}
.primary-inverted:hover{
border: 2px solid $transparant;
background-color: $primary-color;
color: $tertiary-color;
}
.secondary{
border: 2px solid $transparant;
background-color: $secondary-color;
color: $tertiary-color;
}
.secondary:hover{
border: 2px solid $secondary-color;
color: $tertiary-color;
#include alphaBackground();
}
.secondary-inverted{
border: 2px solid $secondary-color;
color: $tertiary-color;
#include alphaBackground();
}
.secondary-inverted:hover{
border: 2px solid $transparant;
background-color: $secondary-color;
color: $tertiary-color;
}
.tertiary{
border: 2px solid $transparant;
background-color: $tertiary-color;
color: $primary-color;
}
.tertiary:hover{
border: 2px solid $tertiary-color;
color: $tertiary-color;
#include alphaBackground();
}
.tertiary-inverted{
border: 2px solid $tertiary-color;
color: $tertiary-color;
#include alphaBackground();
}
.tertiary-inverted:hover{
border: 2px solid $transparant;
background-color: $tertiary-color;
color: $primary-color;
}
</style>

Answer 1

I got the following answer from the Nuxt discord
computed: {
something() {
return !process.client ? 'runs on server' : ''
}
}