How to get CSS values from Vue component?

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>