How to destructure props in Vue just like {...props} in React?
You can use the v-bind directive to bind all the properties of an object as props:
<svg> <circle v-bind="circle"> </circle></svg>
Just to add to CMS answer, as this doesn't work (completely) with the given example as 'stroke-width' isn't correctly passed (stroke width needs to be kebab-case). For this to work it needs to be:
<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 v-bind="circle"> </circle> </svg> `, computed: { circle() { return { cx: '50%', cy: '50%', r: '45%', 'stroke-width': '10%' } } } }) new Vue({ el: '#app' })</script>