Vue-cli 3 component library to support Vue SSR project - vue.js

Question

I am creating a custom component library that i want to share across multiple vue ssr projects.
Problem:
Using the current option, i get a hydration error(The client-side rendered virtual DOM tree is not matching server-rendered content.) which is fixed if i wrap the components within <no-ssr> tags which i do not want to do. I had these component files in one of the vue projects directly before and they worked without any issue.
Example file that does not work:
<template>
<div class="collapse">
<div class="trigger" #click="handleClickEvent">
<slot name="trigger"></slot>
</div>
<div :id="uniqueKey" class="details">
<slot></slot>
</div>
</div>
</template>
<style lang="scss" scoped>
.collapse {
.trigger {
cursor: pointer;
}
.details {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
}
}
</style>
<script>
import $ from 'bucks-js'
export default {
name: 'collapse',
data: () => ({
uniqueKey: null,
}),
props: {
// if collapse should be triggered from outside
manual: { type: Boolean, default: false },
},
created () {
this.uniqueKey = 'mapify-collapse-' + $.string.random()
},
methods: {
/**
* Handles click event.
*/
handleClickEvent () {
// if collapse should be manual triggered , fire event and open from outside
this.$emit('triggered')
if (!this.manual) this.openCloseDetails()
},
/**
* Open / close details collapse.
*/
openCloseDetails () {
if (!$.isClient()) return
let detailsContainer = document.getElementById(this.uniqueKey)
// check if open
if (detailsContainer.style.maxHeight) {
detailsContainer.style.maxHeight = null
} else {
detailsContainer.style.maxHeight = detailsContainer.scrollHeight + 'px'
}
},
/**
* Open details.
*/
openDetails () {
if (!$.isClient()) return
let detailsContainer = document.getElementById(this.uniqueKey)
detailsContainer.style.maxHeight = detailsContainer.scrollHeight + 'px'
},
/**
* Close details.
*/
closeDetails () {
if (!$.isClient()) return
let detailsContainer = document.getElementById(this.uniqueKey)
detailsContainer.style.maxHeight = null
},
},
}
</script>
This is part of my package.json:
"scripts": {
"build": "rm -rf ./lib && vue-cli-service build --target lib src/index.js"
},
"dependencies": {
"bucks-js": "^1.5.3",
"vue": "^2.6.11"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^4.2.3",
"#vue/cli-service": "^4.2.3",
"node-sass": "^4.13.1",
"sass-loader": "^8.0.2",
"vue-template-compiler": "^2.6.11"
}
I also tried to setup the package with this very helpful repository https://github.com/team-innovation/vue-sfc-rollup but the components do not work anymore as they should.