JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <my-component></my-component>
</div>

<script>
  Vue.component('my-component', {
    template: `
      <svg>
        <circle :cx="circle.cx" :cy="circle.cy" :r="circle.r" :stroke-width="circle.strokeWidth"> </circle>
      </svg>
    `,
    computed: {
      circle() {
        return {
          cx: '50%',
          cy: '50%',
          r: '45%',
          strokeWidth: '10%'
        }
      }
    }
  })
  
  new Vue({
    el: '#app'
  })
</script>

CSS

div {
  width: 150px;
  height: 150px;
  background-color: red;
}

svg {
  width: 100%;
  height: 100%;
}

svg circle {
  fill: none;
  stroke: #000;
}