How to get CSS values from Vue component? - css

Question

I'm trying to get css values from vue component. What I want is to receive the css of vue component in string format like this
"#about {
margin: 70px;
}
#header {
color: blue;
font-size: 30px;
}
#sub-header {
color: blue;
font-size: 10px;
}
.text {
border: 1px solid #4caf50;
}"
In my case document.styleSheets doesn't do the job. I need some other way go get css from vue component.
Here is sample template from which I'm trying to get css:
<template>
<div id="about">
<div id="header">This is an about page</div>
<div id="sub-header">CSS Margins</div>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id dictum nisi. </div>
<br>
<div class="text">Pellentesque vehicula sollicitudin nisl, vitae feugiat justo condimentum vel. Integer tellus nisi, porttitor sit amet sodales sit amet, imperdiet a nisl.</div>
</div>
</template>
<style scoped>
#about {
margin: 70px;
}
#header {
color: blue;
font-size: 30px;
}
#sub-header {
color: blue;
font-size: 10px;
}
.text {
border: 1px solid #4caf50;
}
</style>